CSS 및 JavaScript로 애니메이션 Google지도 마커 생성

Google지도 태그가 움직입니다 : CSS 애니메이션의 멋진 사용

Google Maps API는 웹 개발자에게 편리한 도구를 제공하지만 맵 마크는 유연성과 창의성이 부족합니다. 이 기사는 CSS와 JavaScript를 결합하여 사용자 상호 작용에 응답하는 애니메이션 맵 마커를 만들어 맵을보다 생생하고 흥미롭게하는 방법을 보여줍니다.

코어 포인트 :

Google Maps API는 강력하지만 내장 맵 마커는 유연성이 부족합니다. CSS와 JavaScript의 영리한 조합을 통해 대화식이 있고 시각적으로 매력적인 애니메이션 마커를 만들 수 있습니다.

애니메이션 태그를 구현하기위한 주요 단계에는 다음이 포함됩니다. 태그 이미지 추가,

설정 각 태그를 독립 DOM 요소로 렌더링하고 모든 태그를 구성하기 위해 를 작성하고 마지막으로 CSS를 애니메이션에 사용합니다.

마크 애니메이션을 더 잘 제어하려면 외부 토글을 추가하고 클릭 또는 호버와 같은 사용자 상호 작용을위한 애니메이션을 추가하고 다양한 유형의 마크에 다른 애니메이션 효과를 적용하여 사용자 경험을 향상시킬 수 있습니다.

Google Maps API는 강력한 내장 기능을 갖춘 몇 줄의 코드로 우수한 사용자 경험을 만듭니다. 그러나 유연성과 창의성 부족 인 맵 마커를 맞춤화하는 것이 분명한 단점이 있습니다.
• 사용자 정의 마커 이미지, 툴팁 및 태그를 추가 할 수 있지만 맵에 많은 마킹 지점이있을 때 혼란스러워 보이는 정적 텍스트 상호 작용입니다. 현재 사용자 작업에 응답하는 대화식 태그를 만드는 표준 방법은 없습니다.
이 문제를 해결하기 위해 진정으로 고유 한 맵을 만들 수있는 방법을 탐색했습니다. 즉, 맵 마크에 CSS3 애니메이션을 추가하고 비주얼을 향상시키기 위해 점프, 회전 또는 숨기도록합니다.
• 사용자가 마크를 가리키거나 마크를 클릭하거나지도 외부의 토글 버튼을 사용하면 CSS 애니메이션을 사용하여 마크를 움직일 수 있습니다. 이 안내서는 모든 프로젝트에 적용 할 수있는 간단한 전략에 중점을 둘 것입니다. (Ryan Connolly와 Felipe Figueroa의 두 가지 예는 비슷한 접근법을 사용합니다.) optimized: false 다음은 애니메이션 마커의 간단한 예입니다. 유명한 Cheshire Cat은 매사추세츠 주 3 곳의 다른 위치에 대한 마커입니다. 오른쪽 상단의 토글 버튼을 사용하여 애니메이션을 변경할 수 있습니다. 코드 펜 샘플 링크 OverlayView
기본 단계 :
• 다음 단계는 맵 마크에 CSS 애니메이션 함수를 추가하도록 안내합니다. 1 단계 : 태그가 지정된 이미지를 추가하십시오

다음 코드로 이미지를 지정하십시오

2 단계 : SET 이를 통해 각 마커를 독립 DOM 요소로 렌더링 할 수 있습니다.

<code class="language-javascript">var catIcon = {
    url: myImageURLhere,
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
};</code>

3 단계 :

를 작성하십시오 이것은 한 패널의 모든 마커를 구성하여 DOM에서 액세스 할 수 있도록합니다. OverlayView 라인에서는 ID를 태그 레이어에 할당하여 CSS에서 사용할 수 있습니다. 이 는 다른 레이어가 아닌 마커를 자동으로 수집합니다. 이 경우 다른 레이어가 없으므로 모든 마커를 수집합니다.

4 단계 : CSS를 사용하여 애니메이션을 추가하십시오 이것은 일회성 애니메이션 또는 연속 애니메이션 일 수 있습니다 :

유연한 옵션 :

위의 단계는 모든 마커를 즉시 애니메이션합니다. 애니메이션 마크 업을 제어하는 ​​더 좋은 방법은 다음과 같습니다.

<code class="language-javascript">var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: catIcon,
    optimized: false
});</code>

외부 스위치 : getPanes() 핸들러를 사용하여 애니메이션의 디스플레이 및 숨기기를 쉽게 제어하거나 다른 태그의 애니메이션 효과를 변경할 수 있습니다. OverlayView

点击/悬停：

通过创建全局数组存储所有标记，并为每个标记添加唯一的

属性，你可以为点击和悬停事件添加动画。

<code class="language-javascript">var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function() {
    this.getPanes().markerLayer.id = 'markerLayer';
};
myoverlay.setMap(map);</code>

不同标记类型的不同动画：

利用CSS选择器，根据标记图像的

属性，为不同类型的标记应用不同的动画。

• 요약 :

  개발자 또는 디자이너로서 주요 목표는 사용자가 좋아하는 제품을 만드는 것입니다. 사용자는 많은 Google지도 제품에 노출되었으며 이제지도를 돋보이게 할 때입니다! 실제 움직이는 물체 (예 : 고양이)와 유사한 마커 이미지의 경우 자연 운동에 해당하는 CSS 애니메이션으로 추가 할 수 있습니다. .click()

  对于不具备传统移动性的标记图像（例如商店），可以添加使其看起来对用户点击做出反应的动画，例如跳跃或抖动。
데이터가 각 태그에 해당하면 데이터에 따라 태그를 반응하게 할 수 있습니다. 예를 들어, 번화 한 교차로의 경우, 플래시 느낌표가 그 위에 추가 될 수 있습니다.

• 시도해보고 사용자가 당신의 일을 칭찬 할 때까지 기다리십시오! faqs : title

  （此处应补充原文中提供的FAQs内容，并进行相应的伪原创改写，保持内容一致性，避免重复。）

위 내용은 CSS 및 JavaScript로 애니메이션 Google지도 마커 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!