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

Question

У меня простой вопрос, но я не могу найти ответ на документации API 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);

Полигоны появляются на моей карте, нет проблем. Но то, что я должен сделать сейчас, - это открыть «inwoWindow», нажав на каждые полигоны (с другим контентом для каждого полигонов).

У кого-то есть идея или пример?

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

Answer 1

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

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

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

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

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

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

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

Удачи!

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

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

Answer 3

Привет и спасибо много FILIP-FKU!

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

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

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

Спасибо снова Filip! :)

Answer 4

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

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

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

Answer 5

В V3 вы все равно использовали inwoWindow, но с различным синтаксисом:

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

}

Где вы хотите изменять текст и отображение inwoWindow:

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

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

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

Это имеет некоторую ссылку: http://code.google.com/apis/maps/documentation/javascript/overlays.html.