Google Maps API V3 - infobox personalizado para múltiples polígonos
-
10-12-2019 - |
Pregunta
Esta es mi primera vez trabajando con la API de Google Maps.Tengo un mapa de estilo con múltiples polígonos que cada uno necesita su propio infobox.Los infoboxes deben estar diseñados.Mi problema es que no puedo hacer que los infoboxes funcionen en absoluto.Ahora he estado buscando una solución para los días, incluso he probado este http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/infobox-basic.html, obviamente, debo estar haciendo algo mal.
Aquí está mi código: http://pastebin.com/m23ppxpn
Solución
noté que adjuntar un infoBOX a un polígono da como resultado este error en infobox.js
Uncaught TypeError: Object #<V> has no method 'getPosition'
Podría ser porque un polígono representa un área, mientras que un marcador representa un punto.Sugiero crear un solo marcador invisible en algún lugar dentro de sus polígonos para anclar cada infobox.
Con esta idea, agregué un infobox al polígono de Australia.El click Escalista todavía se crea para el polígono, pero abre el infobox atado al marcador invisible.
// ... this is near the end of your code...
australia_new_zealand.setMap(map);
google.maps.event.addListener(australia_new_zealand, 'mouseover', function() {
this.setOptions({fillColor: "#28d1e9"});
});
google.maps.event.addListener(australia_new_zealand, 'mouseout',function(){
this.setOptions({fillColor: "#06376a"});
});
// marker inside the Australia polygon, LatLng was manually defined
var australia_new_zealand_center = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-24.5271348225978, 134.296875),
visible: false
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: { background: "url('tipbox.gif') no-repeat", opacity: 0.75, width: "280px" } ,
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
}
// listener responds to a click inside polygon
google.maps.event.addListener(australia_new_zealand, "click", function (e) {
ib.open(map, australia_new_zealand_center);
});
var ib = new InfoBox(myOptions);
//(end) REGION - AUSTRALIA NEW ZEALAND
}
Otros consejos
Pruebe este patio de recreo con los ejemplos patio de recreo