如何在谷歌地图上显示具有相同纬度和经度的多个标记

时间:2018-11-27 22:32:32

标签: javascript google-maps google-maps-markers

如果两个地点的纬度和经度相同,如何在不使用群集的情况下将两个地点信息加载到同一InfoWindow中

这是我一直在使用的代码片段

 var l, m = new google.maps.InfoWindow;

          console.log(m);


          for (google.maps.event.addListener(k, "click", function() {
                  m.close()
              }), i = 0; i < f.length; i++) {
              var n = f[i],
                  o = g[i][0],
                  p = parseFloat(n[1]),
                  q = parseFloat(n[2]),
                  r = new google.maps.LatLng(p, q);


              l = new google.maps.Marker({
                  position: r,
                  map: k,
                  content: o
              }), l.addListener("click", function() { 

                  m.setContent(this.content), m.open(k, this)


              })
          }

此处显示完整代码 https://codepen.io/T-SEA/pen/wQEqaa

2 个答案:

答案 0 :(得分:1)

我建议标记集群https://developers.google.com/maps/documentation/javascript/marker-clustering

使用标记聚类,并将click事件(打开InfoWindow)设置为聚类标记。看一下这个!

答案 1 :(得分:0)

在此上花了3天后,我发现了

  var gmarkers = [];
              var l, m = new google.maps.InfoWindow;
              var j;
              for (google.maps.event.addListener(k, "click", function() {
                      m.close()
                  }), i = 0; i < f.length; i++) {
                  var n = f[i],
                      o = g[i][0],
                      p = parseFloat(n[1]),
                      q = parseFloat(n[2]),
                      r = new google.maps.LatLng(p, q);
                     // console.log(f);
                         for (j = 0; j < gmarkers.length; j++) {
                                if (r.equals(gmarkers[j].getPosition())) {
                                    gmarkers[j].IWcontent += "<hr>" + o;
                                    break;
                                }
                            }
                            if (i == 0 || j == gmarkers.length) {
                                var marker = new google.maps.Marker({
                                    position: r,
                                    map: k,
                                    IWcontent: o
                                });
                                google.maps.event.addListener(marker, 'click', function (evt) {
                                    m.setContent(this.IWcontent);
                                    m.open(k, this);
                                });
                                gmarkers.push(marker);
                            }

              }