Google Maps API V3 - пользовательский информационный блок для нескольких полигонов - PullRequest
Новая
       25

Google Maps API V3 - пользовательский информационный блок для нескольких полигонов

0 голосов
/ 09 марта 2012

Я впервые работаю с Google Maps API. У меня есть стилизованная карта с несколькими полигонами, для каждого из которых нужен собственный информационный блок. Infoboxes должны быть в стиле. Моя проблема в том, что я не могу заставить работать инфобоксы. Я искал решение уже несколько дней, я даже попробовал это http://google -maps-utility-library-v3.googlecode.com / svn / tags / infobox / 1.1.9 / examples / infobox -basic.html Я, очевидно, что-то делаю не так.

Вот мой код: http://pastebin.com/M23PPXpn

Ответы [ 2 ]

2 голосов
/ 10 марта 2012

Я заметил, что присоединение Infobox к многоугольнику приводит к этой ошибке в infobox.js 

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

Это может быть потому, что многоугольник представляет область, а маркер представляет точку.Я предлагаю создать один невидимый маркер где-то внутри ваших полигонов для привязки каждого информационного блока.

С этой идеей я добавил информационный блок в полигон Австралии.Слушатель кликов по-прежнему создается для многоугольника, но он открывает информационный блок, привязанный к невидимому маркеру. 

// ... 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
}
0 голосов
/ 09 марта 2012

Попробуйте эту игровую площадку с примерами Детская площадка

...