1

我有以下代码循环遍历一组标记；

地点数组：

var map_markers = [['Windsor Road, Salisbury, SP2 7NF <br/> 2nd Line', 'Windsor Road, Salisbury,', 1],['Bishopdown Road, Salisbury, SP1 3DT <br/> 2nd Line', 'Bishopdown Road, Salisbury,', 2],['Gainsborough Close, Salisbury, SP2 9HD <br/> 2nd Line', 'Gainsborough Close, Salisbury,', 3],['Montgomery Gardens, Salisbury, SP2 7UQ <br/> 2nd Line', 'Montgomery Gardens, Salisbury,', 4],['Manor Court, Salisbury, SP1 1LN <br/> 2nd Line', 'Manor Court, Salisbury,', 5],];

显然，以上所有内容都需要地理编码，以便我可以在地图上为每个人放置一个图钉，为此我构建了以下函数：

function init_map(map_id, center_address, markers) {

    geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': center_address, 'region': 'uk' }, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) { 

         //Init Map Options
         var mapOptions = {
            zoom: 11,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         }

         var map = new google.maps.Map(document.getElementById(map_id), mapOptions);

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

         var marker, i;

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

            var marker_address = markers[i][1];
            var marker_content = markers[i][0];

            geocoder.geocode( { 'address': marker_address , 'region': 'uk' }, function(results, status) { 

             if (status == google.maps.GeocoderStatus.OK) { 
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {

                    return function() {
                        infowindow.setContent(marker_content);
                        infowindow.open(map, marker);
                    }

                    }) (marker, i)); 

                } else {
                    alert("There was a issue getting the property information.")
                }
            });
         }

      } else {

        alert("Unable to find address: " + status);

      }

  });
}

使用上面的代码，标记被正确放置在地图上，当我单击标记时，infoWindow 确实出现了，但是，它似乎卡在循环中，并且只在所有标记上显示最终的数组元素内容。任何人都可以推荐一个修复？

4

2 回答 2

1

问题是你marker_content在你的循环中创建，但你的事件监听器函数只会知道它的最终值。这是我如何写这个的一个刺：

...
for (i = 0; i < markers.length; i++) {  
    var marker_address = markers[i][1];
    var marker_content;

    geocoder.geocode( { 'address': marker_address , 'region': 'uk' }, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                map: map
            });

            marker_content = markers[i][0];

            bindInfoWindow(marker, map, infowindow, marker_content);
        } else {
            alert("There was a issue getting the property information.")
        }
    });
}
...

// new global function, NOT nested in init_map
function bindInfoWindow(marker, map, infowindow, content) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
    }
}
于 2013-04-16T12:47:00.690 回答
0

这是我用来整理所有这些的示例代码。它具有更高级的信息框设置，因此您可能对此不感兴趣。但请注意我的 var 标记和微调器。这仅适用于代码的标记段...

var data = { "count": 10785236,
 "locationstuff": [{"photo_id": 27932, "photo_title": "Atardecer en Embalse", "photo_url": "http://www.panoramio.com/photo/27932", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/27932.jpg", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/4483"}
,
{"photo_id": 522084, "photo_title": "In Memoriam Antoine de Saint Exupéry", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 17.470493, "latitude": 47.867077, "width": 500, "height": 350, "upload_date": "21 January 2007", "owner_id": 109117, "owner_name": "Busa Péter", "owner_url": "http://www.panoramio.com/user/109117"}
,
{"photo_id": 1578881, "photo_title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia", "photo_url": "http://www.panoramio.com/photo/1578881", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1578881.jpg", "longitude": 145.141754, "latitude": -37.766372, "width": 500, "height": 474, "upload_date": "01 April 2007", "owner_id": 140796, "owner_name": "rosina lamberti", "owner_url": "http://www.panoramio.com/user/140796"}
,
{"photo_id": 97671, "photo_title": "kin-dza-dza", "photo_url": "http://www.panoramio.com/photo/97671", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/97671.jpg", "longitude": 30.785408, "latitude": 46.639301, "width": 500, "height": 375, "upload_date": "09 December 2006", "owner_id": 13058, "owner_name": "Kyryl", "owner_url": "http://www.panoramio.com/user/13058"}
,
{"photo_id": 25514, "photo_title": "Arenal", "photo_url": "http://www.panoramio.com/photo/25514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/25514.jpg", "longitude": -84.693432, "latitude": 10.479372, "width": 500, "height": 375, "upload_date": "17 June 2006", "owner_id": 4112, "owner_name": "Roberto Garcia", "owner_url": "http://www.panoramio.com/user/4112"}
,
{"photo_id": 57823, "photo_title": "Maria Alm", "photo_url": "http://www.panoramio.com/photo/57823", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57823.jpg", "longitude": 12.900009, "latitude": 47.409968, "width": 500, "height": 333, "upload_date": "05 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"}
]}

var markers = [];
    for (var i = 0; i < data.count; i++) {
    spinnerUp(i);
    }

        function spinnerUp() {

            var data_mapper = data.locationstuff[i];

            var latLng = new google.maps.LatLng(data_mapper.latitude,data_mapper.longitude);

            var boxText = "<div class='mapLocationBox'>";
                boxText += "<h2>" + data_mapper.title + "</h2>" + "<p>" + data_mapper.address + "<br>" + data_mapper.city + ", " + data_mapper.zip + "</p>";
                boxText += "</div>";

            switch (data_mapper.iconSpecial)
                {
                case 0:
                  var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
                  break;
                case 1:
                  var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
                  break;
                }

            var marker = new google.maps.Marker({position: latLng,icon:iconColorSpecial});

            var infowindow = new google.maps.InfoWindow({
                                                    content: boxText
                                                    ,disableAutoPan: false
                                                    ,maxWidth: 0
                                                    ,pixelOffset: new google.maps.Size(0, 0)            
                                                    ,zIndex: null
                                                    ,closeBoxMargin: "10px 2px 2px 2px"
                                                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                                                    ,infoBoxClearance: new google.maps.Size(1, 1)
                                                    ,isHidden: false
                                                    ,pane: "floatPane"
                                                    ,enableEventPropagation: false});

        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, this);});
        markers.push(marker);       
        }

我有一个提供地址的文件。它可以是动态的或静态的。

在我通过我的循环旋转位置之前，我还弄清楚了地理定位的东西。

这种方法可以帮助你重构你的方法。

希望它有所帮助，祝你好运！

于 2013-04-16T13:01:07.140 回答