GMaps API V3 - несколько маркеров и информационное окно - PullRequest
Новая
       33

GMaps API V3 - несколько маркеров и информационное окно

3 голосов
/ 29 июля 2011

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

Я искал на многих сайтах, но не нашел, в чем проблема в моем коде. Я надеюсь, что вы сможете мне помочь (я уверен, что это так!)

Это мой код: 

<script type="text/javascript">
            var map;
            var geocoder;
            $(document).ready(function() {
                initializeMap();
            });


            function initializeMap() {

                var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"me@me.com"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"me@me.com"}]; 


                var center = new google.maps.LatLng(40.667, -73.833); 

                var myOptions = {
                    zoom: 8,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                geocoder = new google.maps.Geocoder();

                for (i = 0; i < people.length; i++) {
                    var p = people[i];



                    geocoder.geocode( { 'address': p["address"]}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map:map,
                                draggable:false,
                                animation: google.maps.Animation.DROP,
                                title:p["lastname"] + " " + p["firstname"],
                                position: results[0].geometry.location
                            });


                            var myWindowOptions = {
                                content:
                                    '<h3>'+p["lastname"] + " " + p["firstname"]+'</h3>'+
                                    '<p>'+p["address"]
                            };

                            var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);

                            google.maps.event.addListener(marker, 'click', function() {
                                myInfoWindow.open(map,marker);
                            });
                    });
                }
            }

 </script>

Я очень надеюсь, что кто-нибудь покажет мне мою ошибку (и) и большое спасибо за помощь !!

Нет, я правда не понимаю, Это должно быть что-то, чего я не видел в своем коде: 

<script type="text/javascript">
            var map;
            var geocoder;
            $(document).ready(function() {
                initializeMap();
            });


            function initializeMap() {

                var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"me@me.com"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"me@me.com"}]; 


                var center = new google.maps.LatLng(50.833, 25.000); 

                var myOptions = {
                    zoom: 8,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                geocoder = new google.maps.Geocoder();



                var infowindow = new google.maps.InfoWindow();

                var marker, i;

                for (i = 0; i < people.length; i++) {  
                    alert(people[i]['address']);
                    geocoder.geocode( { 'address': people[i]["address"]}, function(results, status) {

                        marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map
                        });

                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                                infowindow.setContent('<h3>'+people[i]["lastname"] + " " + people[i]["firstname"]+'</h3>');
                                infowindow.open(map, marker);
                            }
                        })(marker, i));
                    });
                }

            }
</script>

Спасибо за помощь !! :)

Ответы [ 3 ]

5 голосов
/ 30 июля 2011

Вы должны хранить ссылки на все ваши маркеры и все информационные окна. Это главная идея. Вот одна из ссылок, которые я нашел и использовал до

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ Это хорошо известная проблема. Есть много информации об этом. Попробуйте поискать там .

Надеюсь, это будет полезно.

1 голос
/ 25 сентября 2012

Я тоже попал в этот, и я просто исчерпал его (довольно ублюдок, имхо).

Основная проблема здесь связана с асинхронной функцией geocoder.geocode (): встроенный обратный вызов, в котором вы пишете свой код, выполняется в произвольное время (время, которое гугл тратит, чтобы ответить на ваш запрос), и не имеет ничего для делать с вашим за цикл.

По этой причине ваша переменная счетчика i часто будет содержать последнее возможное значение, поскольку выполнение короткого цикла для выполняется намного быстрее, чем HTTP-запрос для достижения сервера. и возвращайся.

В основном решение объединяет это

GMaps JS Geocode: использование / передача переменных с функцией асинхронного геокода?

с этим

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

как указано от Руслана Полуцыгана. Для меня реальная хитрость заключалась в том, чтобы держать любую итеративную операцию вне обратного вызова геокодера. Итак, это «ядро»: 

function geocodeSite(site) {
  geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': site.place + ', IT'}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      site.position = results[0].geometry.location;
      addMarker(site);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function addMarker(site) {
  marker = new google.maps.Marker({
      map: map,
      position: site.position,
      animation: google.maps.Animation.DROP,
      title: site.name
  });
  google.maps.event.addListener(marker, 'click', function () {
    infoWindow.setContent(site.name);
    infoWindow.open(map, this);
  });
}

и вот как я его использую: 

<script type='text/javascript'>
  var data = <?php print $geodata?>;
  for (var i = 0; i < witaly_data.length; i++) {
    geocodeSite(data[i]);
  }
</script>

где data - переменная json, сгенерированная мной на стороне сервера, и состоит из имени и адреса (того, который мы передаем геокодеру).

Очевидно, вы должны инициализировать свою карту в другом месте (я делаю это в jquery document.ready ()) и объявить ее как глобальную переменную, например, как экземпляр infoWindow.

0 голосов
/ 10 ноября 2014

Вот пример кода, который работает для меня 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
    var branches = '@Model.SerializedBranchesMapInfos'; //Info from server

    function setMarker(map) {
        if (branches != null && branches.length > 0) {
            branches = branches.replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, "\"");
            var branchesList = JSON.parse(branches);

            for (var i = 0; i < branchesList.length; i++) {
                addMarker(map, branchesList[i]);
            }
        }
    }

    function addMarker(map, branch) {
        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            position: {
                lat: branch.Latitude,
                lng: branch.Longitude
            },
            map: map,
            title: branch.branchCode
        });

        var contentString = '<div><strong>' + branch.BranchCode + '</strong><br>' +
                                branch.Description + '</div>';

        google.maps.event.addListener(marker, 'click', function () {
            if (contentString == infowindow.getContent()) {
                infowindow.close(map, this);
                infowindow.setContent('');
            }
            else {
                infowindow.setContent(contentString);
                infowindow.open(map, this);
            }
        });
    }

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(3.872310, 108.160445), // Initiaize with Riau Islands coordinates
            zoom: 6
        };
        var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
        setMarker(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
...