標記mouseover谷歌地圖上的自定義div

-1

我正在創建一個谷歌地圖使用json數組中的數據與多個拉特和朗不同的位置。地圖已成功創建。現在我想在鼠標上方的每個標記上顯示一個自定義彈出窗口（帶有動態信息的div）。我試過下面的代碼，但鼠標懸停的x，y位置返回不正確。他們表現出不同的標記懸停同一位置標記mouseover谷歌地圖上的自定義div

var secheltLoc = new google.maps.LatLng(lat, lang); 

     myMapOptions = { 
    zoom: 13, 
    center: secheltLoc, 
    scaleControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    icon: 'images/mpicon.png', 
    zoomControlOptions: {position: 
    google.maps.ControlPosition.LEFT_CENTER},mapTypeControlOptions: { 
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']} 
}, 
     map = new google.maps.Map(document.getElementById("js_bigMap"), myMapOptions); 

     marker = new google.maps.Marker({ map: map, draggable: true,position: new google.maps.LatLng(lat, lang),visible: true,icon: 'images/mpicon.png',}); 

     marker.setMap(map); 

/*markerData contains latlang of locations*/ 
    for(var i = 0 ; i < markerData.length; i++) 
    { 
      marker_ico = 'images/mpicon.png'; 
      marker = new google.maps.Marker({map: map, draggable: true,position: markerData[i].latLng,visible: true,icon: marker_ico,}); 

      overlay = new google.maps.OverlayView(); 
      overlay.draw = function() {}; 
      overlay.setMap(map); 
      google.maps.event.addListener(marker, 'click', function (e) 
      { 
       var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
       console.log(point); 
      }); 
      google.maps.event.addListener(marker, 'mouseover', function (e) 
      { 
       var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
       console.log(point); 
      }); 
    }/*loop*/

來源

2017-08-27 Bilal Rabbi

您對所有標記都使用'position：markerData [i] .latLng'。你從哪裏得到'latLng'？ – candidJ

latlng是正確的。我已經將它們保存在markerData變量中。地圖成功創建 –

請提供一個[mcve]來演示問題以及問題的明確解釋（即您獲得的示例值以及您期望的值） – geocodezip

我相信你應該使用IIFE在你的循環得到X，Y的不同值的不同標記

(function(marker, overlay) { 
    google.maps.event.addListener(marker, 'click', function (e) { 
     var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
     console.log(point); 
    }); 
    google.maps.event.addListener(marker, 'mouseover', function (e) { 
     var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
     console.log(point); 
    }); 
})(marker, overlay);

希望這有助於！

來源

2017-08-29 12:07:16 xomena

標記mouseover谷歌地圖上的自定義div

回答

相關問題