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？

後來編輯：地圖大小不能更改。

來源

2014-09-25 machineaddict

您可以更改縮放級別，以便您不會看到世界地圖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看到小提琴仍然沒有權利光標變爲懸停指針，並在地圖不拖動時，當您嘗試拖動標記，（你可以花一些時間通過根據用戶試圖拖動標記的手段移動地圖來修復此問題）

來源

2014-10-01 15:56:58 yoelp

只要鼠標移出其他標記消失，我就嘗試了兩個事件。

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

來源

2014-09-25 12:13:41 xmux

問題是它創造了令人討厭的閃爍效果。 – machineaddict 2014-09-25 12:17:46

是的，我知道只要標記是可拖動的，它就會創建其他標記，因爲它在3個世界地圖中顯示相同的地方。其實這是對的，因爲這是你想要在地圖上顯示的點。所以在這3個相同的世界裏，它有完全相同的點。所以這通常會顯示3個標記。在可拖動的錯誤，你沒有任何確切的一點。它只是一個佔位符。所以你可以隨時改變位置。 – xmux 2014-09-25 12:23:18

Google地圖標記在寬地圖上多次出現

回答

相關問題