Google地图标记在宽地图上多次出现

问题描述：

我遇到此问题，其中标记在宽地图，1920x1080屏幕分辨率，地图高度500px和宽度100％（a live example）上出现多次。Google地图标记在宽地图上多次出现

<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>

然而，设置标记为可拖动使得谷歌地图API不多次（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, 
      draggable: true, 
      title: 'Hello World!' 
     }); 
    } 

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

问：我怎样才能防止重复标记，而标记保持undraggable？

后来编辑：地图大小不能更改。

您可以更改缩放级别，以便您不会看到世界地图3次。就像这里我更新了你的[JSFiddle]（http://jsfiddle.net/f9jxtt34/4/） – xmux 2014-09-25 11:23:07

这不是一个选项。地图必须宽度为100％。 – machineaddict 2014-09-25 11:46:19

缩放级别1不会帮助你也或？因为那样你就拥有了完整的世界地图。不是同一张地图的三倍。 – xmux 2014-09-25 11:47:35

答

这可能有点帮助，我设置拖动为true，但在拖动事件设置的位置返回到原来的位置。

<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看到小提琴仍然没有权利光标变为悬停指针，并在地图不拖动时，当您尝试拖动标记，（你可以花一些时间通过根据用户试图拖动标记的手段移动地图来修复此问题）

答

只要鼠标移出其他标记消失，我就尝试了两个事件。

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

问题是它创造了令人讨厌的闪烁效果。 – machineaddict 2014-09-25 12:17:46

是的，我知道只要标记是可拖动的，它就会创建其他标记，因为它在3个世界地图中显示相同的地方。其实这是对的，因为这是你想要在地图上显示的点。所以在这3个相同的世界里，它有完全相同的点。所以这通常会显示3个标记。在可拖动的错误，你没有任何确切的一点。它只是一个占位符。所以你可以随时改变位置。 – xmux 2014-09-25 12:23:18

Google地图标记在宽地图上多次出现

相关推荐