在Google地图中标记多个地点 [英] Mark multiple locations in Google Map

问题描述

我使用 Google map api v3 绘制位置数组的标记。我的脚本是

 函数OnSuccess（响应）{
 
 var markers = response.d.split（ '^^'）; 
 var latlng = new google.maps.LatLng（51.474634，-0.195791）; 
 var mapOptions1 = {
 zoom：14，
 center：latlng 
} 
 var geocoder = new google.maps.Geocoder（）; 
 var infoWindow = new google.maps.InfoWindow（）; 
 var map = new google.maps.Map（document.getElementById（map-canvas），mapOptions1）; 
 for（i = 0; i  var data = markers [i]; 
 
 geocoder.geocode（{'address'：data}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 map .setCenter（results [0] .geometry.location）; 
 
 
 var marker = new google.maps.Marker（{
 map：map，
 position：结果[0] .geometry.location，
 title：data 
}）; 
 
 
} else {
 alert（Geocode was not successful for原因如下：+ status; 
} 
}）; 
} 
（函数（标记，数据）{
 
 //将单击事件附加到当前标记
 google.maps.event.addListener（marker，点击，功能（e）{
 infoWindow.setContent（data）; 
 infoWindow.open（map，marker）; 
}）; 
}）（marker，data） ; 
 
  

其中标记变量正在带来适当的数据，我的测试数据是由5个元素组成的数组

1. 游戏Larder，24 The Parade，Claygate，Surrey，KT10 0NU


2. 24 The Parade，Claygate，Esher，Surrey KT10 0NU


3. 卡牌系列，14 The Parade，Claygate，ESHER，KT10 0NU



4. 16A The Parade，Claygate，ESHER，KT10 0NU

   
   
   

   和 markers 但是它只绘制两个标记。这里有什么可能是错误的

解决方案

$ b

我输入的地点彼此非常接近，例如1和2点，它们给出相同的 latlong ，因此标记为一个地方。我发现 latlong 此处。感谢您的回答btw：）

解决方案

在page.aspx中。插入标记< div id =map-canvas>< / div>

.aspx并插入脚本>

  var lis_marker = new Array（）; 
 for（i = 0; i  var data = markers [i]; 
 
 geocoder.geocode（{'address'：data}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 map .setCenter（results [0] .geometry.location）; 
 
 
 lis_marker [i] = new google.maps.Marker（{
 map：map，
 position：results [0] .geometry.location，
 title：data 
}）; 
 
 
} else {
 alert（Geocode was not成功的原因如下：+ status; 
} 
}）; 
} 
  

与您的代码有区别：

<1> var lis_marker = new Array（）;

<2> lis_marker [i] = new google.maps.Marker（{...}）;

I am using Google map api v3 to plot markers of location array. My script is

function OnSuccess(response) {

            var markers = response.d.split('^^');
            var latlng = new google.maps.LatLng(51.474634, -0.195791);
            var mapOptions1 = {
                zoom: 14,
                center: latlng
            }
            var geocoder = new google.maps.Geocoder();
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions1);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i];

                geocoder.geocode({ 'address': data }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);


                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            title: data  
                        });


                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }
            (function (marker, data) {

                // Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }

where markers variable is bringing proper data, my test data is array of 5 elements

1. The Game Larder, 24 The Parade, Claygate, Surrey,KT10 0NU
2. 24 The Parade, Claygate, Esher, Surrey KT10 0NU
3. Card Collection, 14 The Parade, Claygate, ESHER, KT10 0NU

4. 16A The Parade, Claygate, ESHER, KT10 0NU

   and same is coming into array markers however it is plotting only two markers. What could be wrong here

Solution

I was entering locations which are very close to each other e.g 1 and 2 point which gives same latlong hence mark as one place. I found latlong here. Thanks for answers btw :)

解决方案

In page.aspx. insert tag <div id="map-canvas" ></div>

view source page.aspx and insert script into it>

var lis_marker = new Array();
for (i = 0; i < markers.length; i++) {
            var data = markers[i];

            geocoder.geocode({ 'address': data }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);


                    lis_marker[i] = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: data  
                    });


                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

there are difference with your code:

1: var lis_marker = new Array();

2: lis_marker[i] = new google.maps.Marker({...});

这篇关于在Google地图中标记多个地点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！