Google地图具有完全相同位置的多个标记不起作用 [英] Google Maps Multiple markers with the exact same location Not working

查看：75
本文介绍了Google地图具有完全相同位置的多个标记不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想检查是否有任何现有标记符合新标记的latlng，如果是，则合并信息窗口/ tooltip文本。



是我试图做的： 

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8/> 
< title>< / title> 
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js><<< ; /脚本> 
 
 
< script type =text / javascript> 
 var map; 
 var mc; // marker clusterer 
 var mcOptions = {gridSize：10，maxZoom：8}; 
 var infowindow = new google.maps.InfoWindow（）; //全局infowindow 
 var geocoder =新google.maps.Geocoder（）; // geocoder 
 var address = new Array（42.3334，-89.1572，
39.2058，-76.7531，
39.7751，-86.1322，
40.4894， - 78.3499，
42.0203，-87.9059，
36.2673，-86.2912，
33.6115，-84.3745，
44.9793，-93.273，
40.1461，-76.0738，
32.2911，-90.1927，
32.9315，-96.6158，
36.0553，-79.8317，
41.8397，-88.0887 ，
47.8029，-103.267，
34.106，-83.589，
41.5907，-87.3199，
43.0905，-74.3554，
 40.3438，-74.4289，
40.8651，-96.8231，
40.8651，-96.8231，
41.759，-88.1524，
38.2512，-86.8675 ，
41.8119，-87.6873，
41.3651，-89.0866，
25.7791，-80.1978，
41.6404，-88.0696，
 41.7684，-88.1366，
39.7299，-86.4234，
41.5234，-81.5996，
41.6233，-88.0225，
41.0171，-80.8029， 
40.2899，-82.9811，
41.8119，-87.6873，
32.3445，-99.8021，
41.8119，-87.6873，
29.8131 ，-95.3098，
35.1693，-89.9904，
33.6115，-84.3745，
47.7374，-103。 298，
46.3502，-94.1，
41.9907，-88.4298，
35.3716，-80.5621，
38.189，-85.6768，
41.8119，-87.6873，
32.7714，-97.2915）; 
 var content = new Array（UnitNo1，
UnitNo2，
UnitNo3，
UnitNo4，
UnitNo5，
 UnitNo6，
UnitNo7，
UnitNo8，
UnitNo9，
UnitNo10，
UnitNo11，
UnitNo12 ，
UnitNo13，
UnitNo14，
UnitNo15，
UnitNo16，
UnitNo17，
UnitNo18， 
UnitNo19，
UnitNo20，
UnitNo21，
UnitNo22，
UnitNo23，
UnitNo24，
UnitNo25，
UnitNo26，
UnitNo27，
UnitNo28，
UnitNo29，
UnitNo30，
 UnitNo31，
UnitNo32，
UnitNo33，
UnitNo34，
UnitNo35，
UnitNo36，
UnitNo37 ，
UnitNo38，
UnitNo39，
UnitNo40，
UnitNo41，
UnitNo42，
UnitNo43， 
UnitNo44，
UnitNo45）; 
 
 //乘数的最小和最大限制，对于随机数//保持范围很小，所以标记保持靠近
 var min = .999999; 
 var max = 1.000001; 
 
函数createMarker（latlng，text）{
 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map 
}）; 
 
 ///获取当前在集群中的标记数组
 var allMarkers = mc.getMarkers（）; 
 
 //检查是否有任何现有的标记符合新标记的位置
 if（allMarkers.length！= 0）{
 for（i = 0; i< allMarkers.length; i ++）{
 var existingMarker = allMarkers [i]; 
 var pos = existingMarker.getPosition（）; 
 
 if（latlng.equals（pos））{
 text = text +&+ content [i]; 
} 
} 
} 
 //在哪里添加：mc.addMarker（marker）; //？ 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.close（）; 
 infowindow.setContent（text）; 
 infowindow.open（map，marker）; 
}）; 
返回标记; 
} 
 
函数initialize（）{
 var options = {
 zoom：4，
 center：new google.maps.LatLng（39.8282， - 98.5795），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（document.getElementById（'map'），options）; 
 
 var gmarkers = []; 
 for（i = 0; i< address.length; i ++）{
 var ptStr = address [i]; 
 var coords = ptStr.split（，）; 
 var latlng = new google.maps.LatLng（parseFloat（coords [0]），parseFloat（coords [1]））
 gmarkers.push（createMarker（latlng，content [i]））; 
} 
 
 //标记群集
 mc =新的MarkerClusterer（map，gmarkers，mcOptions）; 
 for（i = 0; i< address.length; i ++）{
 geocodeAddress（address [i]，i）; 
 
} 
} 
< / script> 
< style> 
 html，body，#map {
 height：100％; 
宽度：100％; 
保证金：0; 
 padding：0; 
} 
< / style> 
< / head> 
< body onload =initialize（）;> 
< div id =map>< / div> 
< / body> 
< / html>

我厌倦了在这里找到这个工作示例 http://www.geocodezip.com/SO_OverQueryLimitB.html 并在其中添加以下代码：

  ///获取当前在集群中的标记数组
 var allMarkers = mc.getMarkers（）; 
 
 //检查是否有任何现有的标记符合新标记的位置
 if（allMarkers.length！= 0）{
 for（i = 0; i< allMarkers.length; i ++）{
 var existingMarker = allMarkers [i]; 
 var pos = existingMarker.getPosition（）; 
 
 if（latlng.equals（pos））{
 text = text +&+ content [i]; 
} 
} 
}

让最终结果你点击一个具有相同latlng的标记，它将显示一个信息窗口，其中包含合并后的文本，如 http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html 看到它显示数字4，但只显示3个标记，这是因为右侧的标记与另一个标记合并它，当你点击它时，它会显示你的文字。只有我想使用geocodezip的例子，并在此基础上进行工作，因为我已经有了这些线，并且不需要谷歌去为我获取它们。
感谢您阅读这个长期的问题，如果注意到其他问题。



并且如果您能帮我找到解决方案，谢谢1Mill X。



再次感谢!!!

解决方案

您需要：


  1. 首先创建标记群集器。

  2. 将标记添加到MarkerClusterer ）

    $ p $ 函数createMarker（latlng，text）{
    var marker = new google.maps.Marker（{
    位置：latlng，
    map：map
    }）;

    ///获取当前在集群中的标记数组
    var allMarkers = mc.getMarkers（）;

    //检查是否有任何现有的标记符合新标记的位置
    if（allMarkers.length！= 0）{
    for（i = 0; i< allMarkers.length; i ++）{
    var existingMarker = allMarkers [i];
    var pos = existingMarker.getPosition（）;

    if（latlng.equals（pos））{
    text = text +&+ content [i];



    $ b google.maps.event.addListener（marker，'click'，function（）{
    infowindow.close（） ;
    infowindow.setContent（text）;
    infowindow.open（map，marker）;
    }）;
    mc.addMarker（marker）;
    返回标记;

    $ / code>


工作示例


I want to check to see if any of the existing markers match the latlng of the new marker and if so then merge the info window/tooltip text.

This is what I tried to do: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>


<script type="text/javascript"> 
var map;
var mc;//marker clusterer
var mcOptions = {gridSize: 10, maxZoom: 8};
var infowindow = new google.maps.InfoWindow();//global infowindow
var geocoder = new google.maps.Geocoder(); //geocoder
var address = new Array("42.3334,-89.1572",
"39.2058,-76.7531",
"39.7751,-86.1322",
"40.4894,-78.3499",
"42.0203,-87.9059",
"36.2673,-86.2912",
"33.6115,-84.3745",
"44.9793,-93.273",
"40.1461,-76.0738",
"32.2911,-90.1927",
"32.9315,-96.6158",
"36.0553,-79.8317",
"41.8397,-88.0887",
"47.8029,-103.267",
"34.106,-83.589",
"41.5907,-87.3199",
"43.0905,-74.3554",
"40.3438,-74.4289",
"40.8651,-96.8231",
"40.8651,-96.8231",
"41.759,-88.1524",
"38.2512,-86.8675",
"41.8119,-87.6873",
"41.3651,-89.0866",
"25.7791,-80.1978",
"41.6404,-88.0696",
"41.7684,-88.1366",
"39.7299,-86.4234",
"41.5234,-81.5996",
"41.6233,-88.0225",
"41.0171,-80.8029",
"40.2899,-82.9811",
"41.8119,-87.6873",
"32.3445,-99.8021",
"41.8119,-87.6873",
"29.8131,-95.3098",
"35.1693,-89.9904",
"33.6115,-84.3745",
"47.7374,-103.298",
"46.3502,-94.1",
"41.9907,-88.4298",
"35.3716,-80.5621",
"38.189,-85.6768",
"41.8119,-87.6873",
"32.7714,-97.2915");
var content = new Array("UnitNo1",
"UnitNo2",
"UnitNo3",
"UnitNo4",
"UnitNo5",
"UnitNo6",
"UnitNo7",
"UnitNo8",
"UnitNo9",
"UnitNo10",
"UnitNo11",
"UnitNo12",
"UnitNo13",
"UnitNo14",
"UnitNo15",
"UnitNo16",
"UnitNo17",
"UnitNo18",
"UnitNo19",
"UnitNo20",
"UnitNo21",
"UnitNo22",
"UnitNo23",
"UnitNo24",
"UnitNo25",
"UnitNo26",
"UnitNo27",
"UnitNo28",
"UnitNo29",
"UnitNo30",
"UnitNo31",
"UnitNo32",
"UnitNo33",
"UnitNo34",
"UnitNo35",
"UnitNo36",
"UnitNo37",
"UnitNo38",
"UnitNo39",
"UnitNo40",
"UnitNo41",
"UnitNo42",
"UnitNo43",
"UnitNo44",
"UnitNo45");

//min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;

function createMarker(latlng,text) {

var marker = new google.maps.Marker({
position: latlng,
                map: map
});

                ///get array of markers currently in cluster
                var allMarkers = mc.getMarkers();

                //check to see if any of the existing markers match the latlng of the new marker
                if (allMarkers.length != 0) {
                for (i=0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                if (latlng.equals(pos)) {
                text = text + " & " + content[i];
                }                   
                }
                }
// WHERE TO ADD: mc.addMarker(marker); //??

google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
return marker;
}

function initialize(){
var options = { 
zoom: 4, 
center: new google.maps.LatLng(39.8282,-98.5795), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
};
map = new google.maps.Map(document.getElementById('map'), options); 

var gmarkers = [];
for (i=0; i<address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]))
gmarkers.push(createMarker(latlng,content[i]));
}

//marker cluster
mc = new MarkerClusterer(map, gmarkers, mcOptions);
for (i=0; i<address.length; i++) { 
geocodeAddress(address[i],i);

}
}
</script> 
<style>
html, body, #map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  }
</style>
</head>
<body onload="initialize();">
<div id="map"></div>
</body>
</html>

I tired to take this working example found here http://www.geocodezip.com/SO_OverQueryLimitB.html and add the following code into it:

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
        for (i=0; i < allMarkers.length; i++) {
        var existingMarker = allMarkers[i];
        var pos = existingMarker.getPosition();

        if (latlng.equals(pos)) {
        text = text + " & " + content[i];
        }                   
        }
        }

So that the final result when you click on a marker that has the same latlng it would display one info window with the merged text like the one found here http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html See it shows the number 4 but displays only 3 markers that's because the one on the right side is merged with another one behind it and when you click on it it shows you the text for both. only I would like to use geocodezip's example and work on top of that since I already have the cords and don't need google to go get them for me. Thank you for just reading this LONG Question if noting else..

and Thank you 1Mill X over if you can help me find a solution.

Thanks again!!!

解决方案

You need to :

  1. create the marker clusterer first.

  2. add the markers to the MarkerClusterer (and format your code so it is easier to read...).

    function createMarker(latlng,text) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });

  ///get array of markers currently in cluster
  var allMarkers = mc.getMarkers();

  //check to see if any of the existing markers match the latlng of the new marker
  if (allMarkers.length != 0) {
    for (i=0; i < allMarkers.length; i++) {
      var existingMarker = allMarkers[i];
      var pos = existingMarker.getPosition();

      if (latlng.equals(pos)) {
        text = text + " & " + content[i];
      }                   
    }
  }

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.close();
    infowindow.setContent(text);
    infowindow.open(map,marker);
  });
  mc.addMarker(marker);
  return marker;
}

working example

这篇关于Google地图具有完全相同位置的多个标记不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆