GMaps API V3 - 多重标记&信息窗口 [英] GMaps API V3 - Multiple Markers & InfoWindow

问题描述

我知道，这是一个经常性的，但...我的多重标记有一个大问题：他们都有相同的标题和相同的infowindow内容。

我在很多网站上搜索过，但我没有找到代码中的问题。
我希望你能帮助我（我确信是这种情况！）

这是我的代码：

 < script type =text / javascript> 
 var map; 
 var geocoder; 
 $（document）.ready（function（）{
 initializeMap（）; 
}）; 
 
 $ b函数initializeMap（）{
 
 var people = [{userid：47，lastname：lastname1，firstname： FIRSTNAME1， 地址： SomeAddress， PHONE1： 00000000000， PHONE2： ， 电子邮件： [e-mail]}，{ 参数userid： 42，姓氏 ： lastname2\" ， 名字： FIRSTNAME2， 地址： SomeAddress2， PHONE1： 0， PHONE2： 0， 电子邮件： [e-mail] }]; 
 
 
 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]; 
 
 
 $ b 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，
动画：google.maps.Animation.DROP，
标题：p [lastname] ++ p [firstname]，
位置：结果[0] .geometry.location 
}）; 
 
 
 var myWindowOptions = {
 content：
'< h3>'+ p [ lastname] ++ p [firstname] +'< / h3>'+ 
'< p> + P [ 地址] 
}; 
 
 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（）; 
}）; 
 
 $ b函数initializeMap（）{
 
 var people = [{userid：47，lastname：lastname1，firstname： FIRSTNAME1， 地址： SomeAddress， PHONE1： 00000000000， PHONE2： ， 电子邮件： [e-mail]}，{ 参数userid： 42，姓氏 ： lastname2\" ， 名字： FIRSTNAME2， 地址： SomeAddress2， PHONE1： 0， PHONE2： 0， 电子邮件： [e-mail] }]; 
 
 
 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（{ b $ b 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> 
  

感谢您的帮助！ ：）

解决方案

您必须存储对所有标记和所有infowindows的引用。这是主要想法。以下是我之前找到并使用的链接。

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple -markers-multiple-infowindows /
这是众所周知的问题。有很多关于它的信息。尝试搜索 there 。

我希望它会有帮助。

I know, it is a recurrent but... I have a big problem with my multiple markers : all of them have the same title and the same infowindow content.

I've searched on many websites, but I didn't find where is the problem in my code. I hope you'll be able to help me (I am sure it is the case !)

This is my code :

<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":"[e-mail]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[e-mail]"}]; 


                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>

I realy hope somebody can show me my mistake(s) and thanks a lot for help !!

---

No, I really don't understand, It should be something I didn't see in my code :

<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":"[e-mail]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[e-mail]"}]; 


                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>

Thanks for help !! :)

解决方案

You have to store references to all your markers and all infowindows. It is the main idea. Here is one the links I've found and used before

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ It is well known problem. There are much info regarding it. Try to searh there.

I hope it will be helpfull.

这篇关于GMaps API V3 - 多重标记&信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！