谷歌地图具有完全相同位置的多个标记不起作用答案

【问题标题】：Google Maps Multiple markers with the exact same location Not working谷歌地图具有完全相同位置的多个标记不起作用
【发布时间】：2013-07-16 12:08:13
【问题描述】：

我想检查任何现有标记是否与新标记的 latlng 匹配，如果匹配，则合并信息窗口/工具提示文本。

这是我尝试做的：

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

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

        ///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];
        }                   
        }
        }

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

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

再次感谢！！！

【问题讨论】：

帖子中包含该代码的working example 不会产生该错误。
正确，现在我正在尝试将该工作示例合并到此处找到的此示例 maps.caseypthomas.org/ex/MarkerClustererPlus/…
如果我将您的数据放在我的示例中它可以工作geocodezip.com/SO_OverQueryLimitB.html，如果您尝试重新添加地理编码，您将面临一些挑战。请澄清您的问题。
此外，如果有多个相同的 latlng，您发布的工作示例不会合并信息窗口。（检查任何现有标记是否与新标记的 latlng 匹配并合并信息窗口）此处的示例 maps.caseypthomas.org/ex/MarkerClustererPlus/… 执行此操作。
@geocodezip 澄清一下，我正在尝试使用您的工作示例并添加检查以查看是否有任何现有标记与新标记的 latlng 匹配，如果匹配则合并信息窗口。这个网站也有一个例子frontendfan.com/multiple-markers-with-the-exact-same-location

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

你需要：

首先创建标记聚类器。

将标记添加到 MarkerClusterer（并格式化您的代码，使其更易于阅读......）。

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

【讨论】：