谷歌地图API – 错误的地点多个图标

我有一个很奇怪的问题，似乎最近才出现。 很久以前，我还没有对这个项目做过任何主要的代码修改，也没有对这个function做任何修改。

所以问题是，当我使用API​​向Google Map中添加多个图标时，这些图标会显示在彼此之上。

奇怪的是，标签都是正确定位的，但是它们使用与图标相同的坐标。

这是传递给函数的string

1344, 52.65665917, -2.49004717, '../Images/Icons/Direction/container_blueN.ico', 'Galahad', '2014 Mar 05 Wednesday, 14:00', 'Wellington Road, Horsehay, Hollybank', 'RESERVED', '0 KPH', 0 

function是

 function AddClusterLocation(FID, latitude, longitude, Icon, ID, DateStamp, Location, Event, Speed, IgnitionStatus) { if (objMap) { var cssName = 'MarkerIgnitionOff'; switch (IgnitionStatus) { case '1': cssName = 'MarkerIgnitionOn'; break; default: cssName = 'MarkerIgnitionOff'; } var adjustedIcon = new google.maps.MarkerImage( Icon, new google.maps.Size(32, 32), new google.maps.Point(0, 0), new google.maps.Point(16, 16) ); var objMarker = new MarkerWithLabel({ position: new google.maps.LatLng(latitude, longitude), draggable: false, raiseOnDrag: false, icon: adjustedIcon, map: objMap, labelContent: '&nbsp;&nbsp;' + ID + '&nbsp;&nbsp;', labelAnchor: new google.maps.Point(-8, -8), labelClass: cssName, // the CSS class for the label labelStyle: { opacity: 1.0 } }); // Add Maker to array objMakersArray.push(objMarker); // Wrap the event listener inside an anonymous function // then we immediately invoke and passes the variables to (function (ID, DateStamp, Location, Event, Speed, Icon) { google.maps.event.addListener(objMarker, 'click', function () { if (!objInfoWindows) { objInfoWindows = new google.maps.InfoWindow(); } // Create Paragraph var para1 = document.createElement('p'); var adiv = document.createElement('div'); adiv.style.cssText = 'width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 10pt; color: #000000;'; // var htmlstring = '<div style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">' var htmlstring = '<table>' // style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">' htmlstring = htmlstring + '<tr><td style="width: 100px;"><strong>ID</strong></td><td style="width: 200px;">' + ID + '</td></tr>'; htmlstring = htmlstring + '<tr><td><strong>Date/Time</strong></td><td>' + DateStamp + '</td></tr>'; htmlstring = htmlstring + '<tr><td><strong>Location</strong></td><td>' + Location + '</td></tr>'; htmlstring = htmlstring + '<tr><td><strong>Event</strong></td><td>' + Event + '</td></tr>'; htmlstring = htmlstring + '<tr><td><strong>Speed</strong></td><td>' + Speed + '</td></tr></table>' // htmlstring = htmlstring + '</div>'; adiv.innerHTML = htmlstring; // para1.innerHTML = htmlstring; para1.appendChild(adiv); // Zoom In DIV var aDiv = document.createElement('div'); aDiv.style.width = "100px"; aDiv.style.float = 'left'; // Zoom In var alink = document.createElement('a'); alink.innerHTML = 'Zoom In'; alink.href = '#'; alink.onclick = function () { objMap.setCenter(objMarker.getPosition()); zoomLevel = objMap.getZoom(); if (zoomLevel != 21) { objMap.setZoom(zoomLevel + 1); } return false; }; aDiv.appendChild(alink); // Zoom OUT DIV var bDiv = document.createElement('div'); bDiv.style.width = '100px'; bDiv.style.float = 'left'; // Zoom In var blink = document.createElement('a'); blink.innerHTML = 'Zoom Out'; blink.href = '#'; blink.onclick = function () { objMap.setCenter(objMarker.getPosition()); zoomLevel = objMap.getZoom(); if (zoomLevel != 0) { objMap.setZoom(zoomLevel - 1); } return false; }; bDiv.appendChild(blink); // Add Favourite Div var cDiv = document.createElement('div'); cDiv.style.float = 'right'; cDiv.style.width = '150px'; // Add Favourite var clink = document.createElement('a'); clink.innerHTML = 'Add to Favourite'; clink.href = '#'; clink.onclick = function () { position = objMarker.getPosition(); Pane = window.parent.ASPxSplitterDefault.GetPaneByName('PaneDisplay'); if (Pane) { Pane.SetContentUrl('../Pages/FavouritePage.aspx?latitude=' + position.lat() + '&longitude=' + position.lng(), true); } return false; }; cDiv.appendChild(clink); var para2 = document.createElement('p'); para2.appendChild(aDiv); para2.appendChild(bDiv); para2.appendChild(cDiv); // Create Master Div to hold everything var masterDiv = document.createElement('div'); // Get name of DIV that has Atlas var objDiv = objMap.getDiv(); var divName = objDiv.id; // Bind to mapping Div document.getElementById(divName).appendChild(masterDiv); // Info Div var infoDiv = document.createElement('div'); infoDiv.style.float = 'left'; infoDiv.style.width = '350px'; infoDiv.appendChild(para1); infoDiv.appendChild(para2); masterDiv.appendChild(infoDiv); // Creating the div that will contain the detail map var detailDiv = document.createElement('div'); infoDiv.style.float = 'right'; detailDiv.style.width = '200px'; detailDiv.style.height = '200px'; masterDiv.appendChild(detailDiv) // Setting up small map // Creating MapOptions for the overview map var overviewOpts = { zoom: 14, icon: adjustedIcon, center: objMarker.getPosition(), mapTypeId: google.maps.MapTypeId.HYBRID, disableDefaultUI: true }; var objdetailMap = new google.maps.Map(detailDiv, overviewOpts); // Create a marker that will show in the detail map var objdetailMarker = new google.maps.Marker({ position: objMarker.getPosition(), map: objdetailMap, icon: adjustedIcon, clickable: false }); // Setting the content of the InfoWindow objInfoWindows.setContent(masterDiv); // Tying the InfoWindow to the marker objInfoWindows.open(objMap, objMarker); }); })(ID, DateStamp, Location, Event, Speed, Icon); objMarker = null; } 

}

将会调用这个函数

  function OnCurrentPosition(arg) { if (arg == null) { parent.location = '../Security/Login.aspx'; } if (arg) { var latitude, longitude var arrayList = arg.split(";"); alert(arg); for (i = 0; i < arrayList.length; i++) { if (arrayList[i].length) { var arrLocation = arrayList[i].split("$") AddClusterLocation(arrLocation[0], arrLocation[1], arrLocation[2], arrLocation[3], arrLocation[4], arrLocation[5], arrLocation[6], arrLocation[7], arrLocation[8], arrLocation[9]); SetBounds(arrLocation[1], arrLocation[2]); latitude = arrLocation[1]; longitude = arrLocation[2]; } } CreateClusterer(); if (flgLockMapToBounds == false) { if (objMakersArray.length == 1) { SetMapCentre(latitude, longitude, 14); } else { ZoomToExtend(); } } } } arg = 1344$52.65665917$-2.49004717$../Images/Icons/Direction/container_blueN.ico$Galahad$2014 Mar 05 Wednesday, 14:00$Wellington Road, Horsehay, Hollybank$RESERVED$0 KPH$0$0.00000000$0.00000000$0;1342$52.65582367$-2.48958417$../Images/Icons/Direction/container_yellowN.ico$Gwinevere$2014 Mar 05 Wednesday, 14:00$Woodlands Lane, Horsehay, Coalbrookdale$RESERVED$0 KPH$0$0.00000000$0.00000000$0; 

我真的很迷茫，因为标签是正确的，我每次调用函数都检查经纬度和它的不同。 此外，这是工作，只有昨天客户发现，事实并非如此。

这是我使用的API

 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

感谢您阅读这个问题，希望您能够帮助！ 吉姆

Answer 1

MarkerWithLabel库存在一个问题。 问题 。

Answer 2

在Google Maps Api的实验版本变成v3.18后，MarkerWithLabel v1.1.10最近停止了工作。 我将Maps API设置为“… maps / api / js？v3＆…”，默认情况下会select最新的实验版本（目前为v3.18）。 通过修复版本到v3.17 MarkerWithLabel工作正常。