API di Google Maps API v3 Etichetta e poligoni delle mappe

Sto usando l’API javascript di Google Maps v3 con un progetto e attualmente sto riscontrando problemi nel far comparire i maplabels sopra i poligoni. So che i poligoni sono z-indexed rispetto a solo se stessi (non è in grado di usare lo z-index di un maplabel per posizionare il maplabel sopra di esso). Mi stavo chiedendo se ci fosse qualche trucco per aggirare questo problema. Sto anche usando la libreria di informazioni Window per l’API, e ho bisogno che le etichette appaiano sopra i poligoni, ma sotto la finestra informativa.

Stai cercando di fare qualcosa del genere:

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html

Utilizza infoBox per le etichette delle mappe che appaiono sopra il Poligono FusionTablesLayer.

Con uno sfondo bianco sull’etichetta:

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html

screenshot della mappa

snippet di codice:

google.load('visualization', '1', { 'packages': ['corechart', 'table', 'geomap'] }); var map; var labels = []; var layer; var tableid = 1499916; function initialize() { geocoder = new google.maps.Geocoder(); map = new google.maps.Map(document.getElementById('map_canvas'), { center: new google.maps.LatLng(37.23032838760389, -118.65234375), zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }); layer = new google.maps.FusionTablesLayer(tableid); layer.setQuery("SELECT 'geometry' FROM " + tableid); layer.setMap(map); codeAddress(); google.maps.event.addListener(map, "bounds_changed", function() { displayZips(); }); google.maps.event.addListener(map, "zoom_changed", function() { if (map.getZoom() < 11) { for (var i = 0; i < labels.length; i++) { labels[i].setMap(null); } } }); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport); } else { alert("Geocode was not successful for the following reason: " + status); } }); } function displayZips() { //set the query using the current bounds var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM " + tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG" + map.getBounds().getSouthWest() + ",LATLNG" + map.getBounds().getNorthEast() + "))"; var queryText = encodeURIComponent(queryStr); var query = new google.visualization.Query('https://www.google.com/fusiontables/gvizdata?tq=' + queryText); //set the callback function query.send(displayZipText); } var infowindow = new google.maps.InfoWindow(); function displayZipText(response) { if (!response) { alert('no response'); return; } if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } if (map.getZoom() < 11) return; FTresponse = response; //for more information on the response object, see the documentation //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse numRows = response.getDataTable().getNumberOfRows(); numCols = response.getDataTable().getNumberOfColumns(); for (i = 0; i < numRows; i++) { var zip = response.getDataTable().getValue(i, 1); var zipStr = zip.toString() while (zipStr.length < 5) { zipStr = '0' + zipStr; } var point = new google.maps.LatLng( parseFloat(response.getDataTable().getValue(i, 2)), parseFloat(response.getDataTable().getValue(i, 3))); // bounds.extend(point); labels.push(new InfoBox({ content: zipStr, boxStyle: { border: "1px solid black", textAlign: "center", backgroundColor: "white", fontSize: "8pt", width: "50px" }, disableAutoPan: true, pixelOffset: new google.maps.Size(-25, 0), position: point, closeBoxURL: "", isHidden: false, enableEventPropagation: true })); labels[labels.length - 1].open(map); } } google.maps.event.addDomListener(window, 'load', initialize); 
 #map_canvas { width: 610px; height: 400px; } 
     Show:   

In maplabel.js cambia:

 mapPane.appendChild(canvas); 

a

 overlayLayer.appendChild(canvas); 

I mapPanes sono descritti qui .

Quindi imposta xIndex in mapLabelOptions per portare l’etichetta davanti ai poligoni.

Questo è probabilmente un ritrovamento in ritardo .. ma spero che qualcuno lo troverebbe utile.

Se non si desidera utilizzare infoBox (soluzione geocodezip) anziché un’etichetta e si desidera fornire uno zIndex personalizzato .. Modificare maplabel.js .

Aggiungi la seguente riga poco prima della fine di MapLabel.prototype.onAdd = function () {

 if (canvas.parentNode != null) { canvas.parentNode.style.zIndex = style.zIndex; } 

Ora puoi passare zIndex mentre crei un maplabel:

 var mapLabel = new MapLabel({ text: "abc", position: center, map: map, fontSize: 8, align: 'left', zIndex: 15 }); 

Questo funziona:

In maplabel.js cambia:

 mapPane.appendChild(canvas); 

A

 overlayLayer.appendChild(canvas);