可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I tried to add multiple markers and infowindow to a google map using javascript. Below is the code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
</head>
<body>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script type="text/javascript">
        var locations = [ '1961 East Mall Vancouver BC',
                '2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ];

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom : 14,
            center : new google.maps.LatLng(49.26526, -123.250541),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });

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

        var marker, i;

        for (i = 0; i < locations.length; i++) {

            var geocoder = new google.maps.Geocoder();
            geocoder
                    .geocode(
                            {
                                'address' : locations[i]
                            },
                            function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    map.setCenter(results[0].geometry.location);
                                    marker = new google.maps.Marker({
                                        map : map,
                                        position : results[0].geometry.location
                                    });
                                } else {
                                    alert('Geocode was not successful for the following reason: '
                                            + status);
                                }
                            });

            //add info window
            google.maps.event.addListener(marker, 'click',
                    (function(marker, i) {
                        return function() {
                            infowindow.setContent(locations[i]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
            //end of adding info window

        }//end of for loop
    </script>
</body>
</html>

(Thanks to Google Maps JS API v3 - Simple Multiple Marker Example)

The problem is that: unless I comment

            //add info window
            google.maps.event.addListener(marker, 'click',
                    (function(marker, i) {
                        return function() {
                            infowindow.setContent(locations[i]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
            //end of adding info window

I will only get one marker with no infowindow popup when clicking.

If I comment above code block, I will get three markers, but no infowindow popup either.

Where did I make mistake?

Thank you.

回答1:

The geocoder is asynchronous, you need to add the infowindow inside the geocoder call back. Where you have it currently it runs before any of the markers are defined. I would think you would get a javascript error.

回答2:

This works:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
</head>
<body>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script type="text/javascript">
        var locations = [ '1961 East Mall Vancouver BC',
                '2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ];
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom : 14,
            center : new google.maps.LatLng(49.26526, -123.250541),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker;
        var i;

        $(document).ready(function() {
            initialize();
        });

        function initialize(){
            setMarkers(map,locations);
        }

        function setMarkers(map, address) {
            for ( var i = 0; i < address.length; i++) {
                setMarker(map, address[i])
            }
        }

        function setMarker(map, address) {
            geocoder = new google.maps.Geocoder();
            geocoder
                    .geocode(
                            {
                                'address' : address
                            },
                            function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    map.setCenter(results[0].geometry.location);
                                    var marker = new google.maps.Marker(
                                            {
                                                position : results[0].geometry.location,
                                                map : map
                                            });
                                    google.maps.event.addListener(marker,
                                            "click", function() {
                                                infowindow.setContent(address);
                                                infowindow.open(map, marker);
                                            });
                                } else {
                                    alert("Geocode was not successful for the following reason: "
                                            + status);
                                }

                            });
        }
    </script>
</body>
</html>

Thanks to Google Map multiple infowindow does not work