GMaps API V3 - 多标记和InfoWindow

Ger*_*aut 3 infowindow google-maps-api-3 google-maps-markers

我知道,这是一个经常性的但是...我的多个标记有一个很大的问题:它们都具有相同的标题和相同的infowindow内容.

我在很多网站上搜索过,但是我的代码中没有找到问题所在.我希望你能帮助我(我确信是这样的!)

这是我的代码:

<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>
Run Code Online (Sandbox Code Playgroud)

我真的希望有人可以告诉我我的错误,并感谢你们的帮助!


不,我真的不明白,这应该是我在代码中没有看到的东西:

<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>
Run Code Online (Sandbox Code Playgroud)

感谢帮助 !!:)

Rus*_*gan 5

您必须存储所有标记和所有信息窗口的引用.这是主要的想法.这是我之前发现和使用的链接之一

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

我希望它会有所帮助.