Google지도 API를 사용하여 PolyLine에서 마커 이동 api v3

Google Maps API V3을 사용하고 있습니다. 폴리 라인에서 마커를 부드럽게 움직이기 위해 노력하고 있습니다.Google지도 API를 사용하여 PolyLine에서 마커 이동 api v3

난 (30, -110) 및 (30, -100)으로 고정 점을 만들었습니다 그래서 내가 할 고정 점을 기준으로하기 위해 수있는이 http://jsfiddle.net/bmSbU/154/

여기에 노력했다.

지금 내 질문은 여러 점 (PolyLine)이 있고 마커가 맵에서 플릭 핑없이 부드럽게 움직여야 할 때 동일한 작업을 수행하는 방법입니다.

var map; 
var path; 
var marker; 

function initialize() { 
    var myLatlng = new google.maps.LatLng(35, -105); 
    var myOptions = { 
     zoom: 5, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 

    route = new google.maps.Polyline({ 
     path: [ 
     new google.maps.LatLng(30, -110), 
     new google.maps.LatLng(30, -100)], 
     map: map 
    }); 

    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(30, -110), 
     map: map 
    }); 

    counter = 0; 
    interval = window.setInterval(function() { 
     counter++; 
     var pos = new google.maps.LatLng(30, -110 + counter/100); 
     marker.setPosition(pos); 
     if (counter >= 1000) { 
      window.clearInterval(interval); 
     } 
    }, 10); 
} 

google.maps.event.addDomListener(window, 'load', initialize);

아무도 도와 줄 수 있습니까?

출처

2014-01-24 Pravin Kumar

[방향 서비스의 폴리 라인에 움직이는 마커] (http://www.geocodezip.com/v3_animate_marker_directions.html), [xml에서 폴리 라인의 움직이는 마커] (http://www.geocodezip.com/v3_animate_marker_xml.html)) – geocodezip

jsfiddle에 대한 참조가 아닌 질문에 코드를 게시하십시오. [폴리 라인을 따라 마커를 이동] [1] [1] : http://stackoverflow.com/questions – geocodezip

내가 JSFiddle에 시도 한 내용을 게시 한 ... –

귀하의 jsfiddle은 새로운 MacBook Pro의 Safari 최신 버전에서 원활하게 재생됩니다. 다른 하드웨어/플랫폼을 갖춘 YMMV.

기본적으로 CSS 애니메이션 은 일반적으로과 비슷한 애니메이션이 Javascript로 구현됩니다. 타임 아웃 내부를 통해 Marker # setPosition()을 호출하면 Google Maps API가 애니메이션 아티팩트를 발생시킬 것으로 생각합니다. CSS 애니메이션을 사용하여 Google이 내부적으로 google.maps.Marker#setAnimation 메소드를 구현하는 방법에 대한 해킹에 대한 자세한 내용은 How to add custom animation on Google Map V3 Marker when I drop each marker one by one?에 대한 답변을 참조하십시오.

다른 옵션은 Google의 마커 유형 사용을 중지하고 맞춤 CSS 애니메이션을 지원하는 맞춤 마커 유형을 구현하는 것입니다. 이것은 소리가 나는 것처럼 어렵지 않습니다. Mike Bostock의 블로그 게시물 (using D3 for custom markers on Google Maps)을 확인하십시오.

출처

2014-01-24 14:44:47

다운 워드는 설명해야합니다 ... –

Google지도 API를 사용하여 PolyLine에서 마커 이동 api v3

답변

관련 문제