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

Ответ 1

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

Итак, давайте начнем:

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

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

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

Вы должны уметь находить методы для вызова и всю информацию на странице api:

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

Удачи!

Ответ 2

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

вот мой код:

<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>

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

Ответ 3

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

благодаря вашему комментарию, я знаю, как это сделать!:-) поэтому, если кто-то ищет "как это сделать", вот фрагмент кода:

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

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

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

Ответ 4

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

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

В http://www.ikeepuposted.com/area_served.aspx

Ответ 5

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

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);

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

другой addListener для многоугольников достаточно глючный и должен быть проверен на всех основных браузерах перед публикацией, особенно вариации DRAGGING и MOUSEOVER.

у этого есть ссылка: http://code.google.com/apis/maps/documentation/javascript/overlays.html