Google지도가 넓은지도에서 여러 번 표시됩니다.

Question

넓은지도, 1920x1080 화면 해상도,지도 높이 500px 및 너비 100 % (a live example)에 마커가 여러 번 나타나는이 문제가 있습니다.

<style> 
html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
    function initialize() { 
     var myLatlng = new google.maps.LatLng(0, 0); 
     var mapOptions = { 
      zoom: 0, 
      center: myLatlng 
     } 
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: 'Hello World!' 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<div id="map-canvas"></div> 

그러나 드래그로 마커를 설정하면 마커를 여러 번 (a live example)를 렌더링하지 않도록 Google지도 API를합니다.

<style> 
html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
    function initialize() { 
     var myLatlng = new google.maps.LatLng(0, 0); 
     var mapOptions = { 
      zoom: 0, 
      center: myLatlng 
     } 
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      draggable: true, 
      title: 'Hello World!' 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<div id="map-canvas"></div> 

질문 : 마커 undraggable 유지하면서 어떻게 마커의 중복을 방지 할 수 있습니까?

나중에 편집 :지도 크기는 변경할 수 없습니다.

Answer 1

이 조금 도움이 될 수 있습니다.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(0,0); 
    var mapOptions = { 
    zoom: 0, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     draggable: true, 
     crossOnDrag : false, 
     title: 'Hello World!' 
    }); 
var origPos = marker.getPosition(); 
marker.addListener("drag",function(e){marker.setPosition(origPos);}) 
} 

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

은 여전히 ​​오른쪽 커서를 가져가에 대한 포인터로 변화하지 여기 http://jsfiddle.net/wvch9qpu/3/ onlything 바이올린을보고, 당신이 마커를 드래그 할 때, (당신이 시간을 보낼 수있을 때지도를 드래그하지 사용자가 마커를 얼마나 드래그하려고했는지에 따라지도를 수동으로 이동하여 수정)

Answer 2

다른 마커가 사라지 자 마자 두 이벤트가 발생했습니다.

var marker = new google.maps.Marker(); 
     marker.setPosition(myLatlng); 
     marker.setMap(map); 
     marker.setDraggable(true); 

     google.maps.event.addListener(marker, 'mouseover', function() { 
      marker.setDraggable(false); 
     }); 
     google.maps.event.addListener(marker, 'mouseout', function() { 
      marker.setDraggable(true); 
     }); 

는 여기에 내가 참으로 드래그 설정하지만, 드래그 이벤트를 다시 원래 위치로 위치를 설정, 라이브 example