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

Question

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

com*_*alt 3 google-maps google-maps-api-3 google-maps-markers

我想检查是否有任何现有标记与新标记的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>

Run Code Online (Sandbox Code Playgroud)

我厌倦了在这里找到这个工作示例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];
        }                   
        }
        }

Run Code Online (Sandbox Code Playgroud)

因此,当您单击具有相同latlng的标记时,最终结果将显示一个信息窗口,其中包含合并的文本,如此处所示http://eps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html查看显示数字4但仅显示3个标记,因为右侧的标记与其后的另一个标记合并,当您单击它时,它会显示两者的文本.只有我想使用geocodezip的例子并在其上工作,因为我已经有了电线,并且不需要谷歌去为我取得它们.感谢您阅读此LONG问题,如果注意到其他问题.

感谢你1Mill X,如果你能帮我找到解决方案.

再次感谢!!!

Answer 1

geo*_*zip 21

你需要 :

首先创建标记聚类器.

将标记添加到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;
}

Run Code Online (Sandbox Code Playgroud)

工作实例

令人惊讶的是你如何让这看起来如此简单,我很难理解这一点,它甚至都不好笑.非常感谢你的存在:)和超级善良的解释我所有这一切,甚至提供一个工作的例子,你真的很棒. (3认同)

归档时间：	12 年，10 月前
查看次数：	18481 次
最近记录：	9 年，5 月前