Question

我尝试使用javascript将多个标记和infowindow添加到谷歌地图。以下是代码：

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

（感谢Google Maps JS API v3 - Simple Multiple Marker Example）

问题在于：除非我发表评论

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

单击时，我只会获得一个没有信息窗口弹出的标记。

如果我在上面的代码块中发表评论，我会得到三个标记，但也没有infowindow弹出窗口。

我在哪里弄错了？

谢谢。

Answer 1

地理编码器是异步的，您需要在地理编码器回调中添加infowindow。如果您拥有它，它会在定义任何标记之前运行。我认为你会得到一个javascript错误。

Answer 2

这有效：

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

感谢Google Map multiple infowindow does not work

谷歌地图多个infowindow不起作用

2 个答案: