Google Map上的多个标记：仅显示最后一个标记 [英] Multiple Markers on Google Map: only last marker is shown

问题描述

我在我的地图上显示多个标记时遇到问题。代码首先循环访问一个数组，然后在显示标记并将infoWindow的内容设置为返回地址之前，反转对lat，lon值的地理编码。

我的代码如下。

  for（var i = 0; i< useNowArray.length; i ++）{
 / / plot useNow on map 
 latlng = new google.maps.LatLng（useNowArray [i] ['lat']，useNowArray [i] ['lon']）; 
 console.log（useNowArray [i] ['lat'] + useNowArray [i] ['lon']）; 
 geocoder.geocode（{'latLng'：latlng}，function（results，status）
 {
 if（status == google.maps.GeocoderStatus.OK）
 {
 if（results [0]）
 {
 marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 icon ：'http://www.google.com/intl/zh_CN/mapfiles/ms/micons/blue-dot.png'，
 title：results [0] .formatted_address 
}）; 
 content = results [0] .formatted_address; 
 console.log（content）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i ）{
 return function（）{
 infowindow.setContent（content）; 
 infowindow.open（map，this）; 
 } 
}）（marker，i））; 
} 
} else {
 alert（Geocoder failed due to：+ status）; 
} 
}）; //结束地理编码函数
 
 var map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
  

问题是只显示我的最后一个标记。

我错过了什么？ ：（$ / b>

非常感谢。

解决方案

，地理编码是异步的，循环执行时，发出useNowArray.length请求，每个请求都会更新全局标记，当循环完成时，标记留在循环的最后一个位置。问题：

• Google Maps API v3 - 多个地理编码器请求后的fitBounds


• 多个标记问题（Google Maps API v3）

I am having a problem with displaying multiple markers on my map. The code starts by looping through an array, and then reverse geocoding the lat, lon values before displaying a marker and setting the content of the infoWindow to the returned address.

My codes are below.

for(var i=0; i < useNowArray.length; i++) {
        // plot useNow on map
        latlng = new google.maps.LatLng(useNowArray[i]['lat'], useNowArray[i]['lon']);
        console.log(useNowArray[i]['lat'] + useNowArray[i]['lon']);
        geocoder.geocode({'latLng': latlng}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                if (results[0]) 
                {
                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                        title: results[0].formatted_address
                    });
                    content = results[0].formatted_address;
                    console.log(content);

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(content);
                            infowindow.open(map, this);
                        }
                    })(marker, i));
                }
            } else {
                alert("Geocoder failed due to: " + status);
            }
        }); // end geocode function
    }  
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

The issue is that only my last marker is shown.

What am i missing? :(

many thanks.

解决方案

Your marker variable is global, geocoding is asynchronous. The loop executes, firing off useNowArray.length requests, each one updates the global marker with the resulting position. When the loop is done, the marker is left at the last location in the loop. Similar questions with solutions to the issue:

• Google Maps API v3 - fitBounds after multiple geocoder requests
• Problem with multiple markers (Google Maps API v3 )

这篇关于Google Map上的多个标记：仅显示最后一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！