Google Maps API V3 - Infobox personnalisée pour plusieurs polygones

C'est la première fois que je travaille avec l'API Google Maps. J'ai une carte de style avec plusieurs polygones qui ont chacun besoin de leur propre infobox. Les infoboxes doivent être stylées. Mon problème est que je ne peux pas faire fonctionner les infoboxes. J'ai cherché une solution pendant des jours maintenant, j'ai même essayé ceci http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/infobox-basic.html Je dois évidemment faire quelque chose de mal.Google Maps API V3 - Infobox personnalisée pour plusieurs polygones

Voici mon code: http://pastebin.com/M23PPXpn

Source

2012-03-09 jonthoughtit

J'ai remarqué que la fixation d'un Infobox à un résultat de polygones dans cette erreur dans infobox.js

Uncaught TypeError: Object #<V> has no method 'getPosition'

Il pourrait être parce qu'un polygone représente une zone, tandis qu'un marqueur représente un point. Je suggère de créer un seul marqueur invisible quelque part dans vos polygones pour ancrer chaque infobox.

Avec cette idée, j'ai ajouté une infobox au polygone australien. L'écouteur de clic est toujours créé pour le polygone, mais il ouvre l'infobox liée au marqueur 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 
}

Source

2012-03-10 02:17:32

excellent, merci! J'ai utilisé un infoBubble à la place mais votre suggestion pour le marqueur invisible a bien fonctionné! – jonthoughtit

Heureux que je pourrais aider :) –

Vous êtes mon héros !! Je cherchais une solution comme celle-ci pendant des semaines !! –

Essayez ce terrain de jeu avec des exemples Playground

Source

2012-03-09 19:39:35

Google Maps API V3 - Infobox personnalisée pour plusieurs polygones

Répondre

Questions connexes