API di Google Maps: più icone nel posto sbagliato

Ho un problema molto strano che sembra essere apparso solo di recente. Non ho apportato modifiche importanti al codice del progetto in un momento e nessuna alla funzione in questione da molto tempo.

Quindi, il problema, quando aggiungo più di un’icona a Google Map utilizzando l’API, le icone si visualizzano l’una sull’altra.

Google Screen Capture dal sito web del progetto

La cosa strana è che le etichette sono tutte posizionate correttamente ma quelle usano le stesse coordinate delle icone.

Ecco la stringa che viene passata alla funzione

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 

La funzione è

 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: '  ' + ID + '  ', 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 = '
' var htmlstring = '' // style="width: 300px; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 6pt; color: #FF0000;">' htmlstring = htmlstring + ''; htmlstring = htmlstring + ''; htmlstring = htmlstring + ''; htmlstring = htmlstring + ''; htmlstring = htmlstring + '
ID' + ID + '
Date/Time' + DateStamp + '
Location' + Location + '
Event' + Event + '
Speed' + Speed + '
' // htmlstring = htmlstring + '
'; 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; }

}

La funzione che chiamerebbe questo sarebbe

  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; 

Sono davvero dispiaciuto per spiegare questo come le etichette sono corrette, ho controllato la latitudine e la longitudine e il suo diverso ogni volta che viene chiamata la funzione. Inoltre questo funzionava, solo notato dal cliente ieri che non lo era.

Ecco l’API che utilizzo

  

Grazie per aver letto la domanda, si spera che tu possa aiutare! Jim

C’è un problema con la libreria MarkerWithLabel . Problema

MarkerWithLabel v1.1.10 ha smesso di funzionare per me di recente dopo che la versione sperimentale di Google Maps Api è diventata la v3.18. Ho impostato l’API di Maps su “… maps / api / js? V3 & …” che per impostazione predefinita seleziona l’ultima versione sperimentale (attualmente v3.18). Fissando la versione alla v3.17, MarkerWithLabel ha funzionato correttamente.