1

JavaScript を使用して複数のマーカーと情報ウィンドウを Google マップに追加しようとしました。以下はコードです：

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

クリックすると、情報ウィンドウのポップアップが表示されないマーカーが 1 つだけ表示されます。

上記のコード ブロックにコメントすると、3 つのマーカーが表示されますが、情報ウィンドウのポップアップも表示されません。

どこで間違えたのですか？

ありがとうございました。

4

2 に答える 2

1

ジオコーダは非同期です。ジオコーダ コールバック内に情報ウィンドウを追加する必要があります。現在持っている場所では、マーカーが定義される前に実行されます。JavaScriptエラーが発生すると思います。

于 2012-08-27T20:27:57.697 に答える
0

これは機能します：

<!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 マップのおかげで、複数の情報ウィンドウが機能しません

于 2012-08-27T23:43:46.893 に答える