Карты Google: Как открыть информационное окно для многоугольника, нажав на него? - PullRequest
Новая
       38

Карты Google: Как открыть информационное окно для многоугольника, нажав на него?

10 голосов
/ 17 мая 2010

У меня простой вопрос, но я не могу найти ответ в документации Google Maps API ...

У меня есть карта с 13 полигонами, нарисованными API. Вот пример одного из этих многоугольников: 

 var zone_up_montblanc = new GPolygon([
        new GLatLng(46.21270329318585, 6.134903900311617), 
        new GLatLng(46.20538443787925, 6.136844716370282), 
        new GLatLng(46.20525043957647, 6.141375978638086), 
        new GLatLng(46.20698751554006, 6.148050266912262), 
        new GLatLng(46.21110286985207, 6.153203229026629), 
        new GLatLng(46.21730757985668, 6.151718301267355), 
        new GLatLng(46.22092122197341, 6.153676364285801), 
        new GLatLng(46.22615123408969, 6.149844858907489), 
        new GLatLng(46.22851200024137, 6.149876939987202), 
        new GLatLng(46.22945159836955, 6.142758190170017), 
        new GLatLng(46.21735908463437, 6.141457132705133), 
        new GLatLng(46.21753573755057, 6.138058122426195), 
        new GLatLng(46.21270329318585, 6.134903900311617)
        ], "#6b1f43", 2, 0.9, "#92c87f", 0.5);

тогда: 

  map.addOverlay(zone_up_montblanc);

Полигоны появляются на моей карте, нет проблем. Но сейчас мне нужно открыть окно InfoWindow, щелкнув по каждому многоугольнику (с различным содержанием для каждого многоугольника).

У кого-то была идея или пример?

Большое спасибо за вашу помощь!

Ответы [ 5 ]

6 голосов
/ 09 августа 2012

Я нашел очень хорошее решение, чтобы иметь несколько полигонов с отдельными информационными окнами.

вот мой код: 

<script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8">

    var map;
    var cities = {
        "Hamburg":[
            [53.60, 9.75],
            [53.73, 10.19],
            [53.48, 10.22]
        ],
        "Hannover":[
            [52.34, 9.61],
            [52.28, 9.81],
            [52.43, 9.85]
        ],
        "Bremen":[
            [53.22, 8.49],
            [53.12, 8.92],
            [53.02, 8.72]
        ]
    };
    var opened_info = new google.maps.InfoWindow();

    function init() {
        var mapOptions = {
            zoom:8,
            center:new google.maps.LatLng(53, 9.2),
            mapTypeId:google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
        for (var c in cities) {
            var coods = cities[c]
            var polyPath = [];
            for (j = 0; j < coods.length; j++) {
                polyPath.push(new google.maps.LatLng(coods[j][0], coods[j][1]));
            }
            var shape = new google.maps.Polygon({
                paths:polyPath,
                fillColor:"#00FF00",
                fillOpacity:0.6,
            });
            shape.infowindow = new google.maps.InfoWindow(
                    {
                        content:"<b>" + c + "</b>" + "</br>",
                    });
            shape.infowindow.name = c;
            shape.setMap(map);
            google.maps.event.addListener(shape, 'click', showInfo);
        }

    }
    ;

    function showInfo(event) {
        opened_info.close();
        if (opened_info.name != this.infowindow.name) {
            this.infowindow.setPosition(event.latLng);
            this.infowindow.open(map);
            opened_info = this.infowindow;
        }
    }

</script>

Предоставляет также функцию для закрытия информационных окон путем повторного нажатия на тот же многоугольник.

2 голосов
/ 19 мая 2010

Привет и спасибо большое filip-fku!

благодаря вашему комментарию я, наконец, найду, как это сделать! :-) так что, если кто-то ищет «как это сделать», вот фрагмент кода: 

GEvent.addListener(zone_up_champagne, "click", function(overlay,latlng) {
    map.openInfoWindowHtml(overlay, '<strong>Your html things :</strong><br />etc...');
});

надеюсь, что это поможет!

спасибо еще раз филипп! :)

1 голос
/ 01 октября 2012

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

http://hammerspace.co.uk/projects/maps/

Есть действующий пример на http://www.ikeepuposted.com/area_served.aspx

0 голосов
/ 04 февраля 2012

в V3 вы все равно будете использовать информационное окно, но с другим синтаксисом: 

function initialize() {

// SOME CODE
var mont_blanc_path_array = [ 
new google.maps.LatLng(46.21270329318585, 6.134903900311617),
new google.maps.LatLng(46.20538443787925, 6.136844716370282),
new google.maps.LatLng(46.20525043957647, 6.141375978638086)
];
zone_up_montblanc = new google.maps.Polygon({
    editable: false,    
    paths: mont_blanc_path_array,       
    fillColor: "#0000FF",
    fillOpacity: 0.5,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,     
    strokeWeight: 2
});
// Creating InfoWindow object
var infowindow = new google.maps.InfoWindow({
    content: ' ',
    suppressMapPan:true
});
eventPolygonClick = google.maps.event.addListener(zone_up_montblanc, 'click', function() {
    // MORE CODE OR FUNCTION CALLS
});
// MORE CODE

}

везде, где вам хочется изменить текст и отобразить информационное окно: 

infowindow.setContent("CLICKED me");
infowindow.open(map, zone_up_montblanc);

у меня естьсделал глобальные переменные полигона и eventlistener (подавив «var» в объявлении переменной), чтобы вы могли изменять их в других функциях.это действительно сложно с поведением информационного окна.некоторые люди предпочитают экземпляры infowindow, я бы предпочел иметь один глобальный экземпляр и изменять его содержимое на лету.Остерегайтесь эффекта объявления переменных!

другие addListener для полигонов довольно глючные и должны быть протестированы во всех основных браузерах перед публикацией, особенно в вариациях DRAGGING и MOUSEOVER.: http://code.google.com/apis/maps/documentation/javascript/overlays.html

0 голосов
/ 17 мая 2010

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

Итак, начнем:

  1. Вы добавляете полигоны с помощью map.AddOverlay (), карта затем сохраняет ваши полигоны.
  2. Объявить обработчик событий, который ловит щелчки на карте. Этому обработчику события будет передан GLatLng местоположения, по которому щелкнули, и оверлея, который был нажат (в вашем случае, полигона). Вы можете выполнить простой тест типа, чтобы определить, является ли оверлей полигоном.
  3. В обработчике событий используйте map.openInfoWindowHtml (), передавая GLatLng, предоставленный в качестве местоположения, и содержимое HTML, которое вы хотите отобразить.

Это так просто! Вам нужно будет посмотреть, как вы прикрепляете обработчики событий, так как я не помню подробности в моей голове. Итак, что вам нужно посмотреть в API:

  • Добавление обработчиков событий на карту
  • Проверка типа наложения

Вы должны быть в состоянии найти методы для вызова и всю информацию на странице API:

http://code.google.com/apis/maps/documentation/reference.html

Удачи!

...