为了账号安全,请及时绑定邮箱和手机立即绑定

Google Maps API V3-多个标记完全相同

Google Maps API V3-多个标记完全相同

慕妹3146593 2019-11-22 14:34:55
有点卡在这一个。我正在通过JSON检索地理坐标列表,并将其弹出到Google地图上。除了在我完全相同的位置上有两个或多个标记的情况下,其他所有程序都运行良好。该API仅显示1个标记-最上面的一个。我想这很公平,但我想找到一种以某种方式显示它们的方法。我已经搜索过google并找到了一些解决方案,但它们似乎主要针对的是V2的API或效果不佳。理想情况下,我想要一个解决方案,其中您单击某种组标记,然后显示聚集在所有标记周围的标记。任何人都有这个问题或类似问题,是否愿意分享解决方案?
查看完整描述

3 回答

?
心有法竹

TA贡献1866条经验 获得超5个赞

如果标记位于同一建筑物中,则偏移标记不是真正的解决方案。您可能想要做的就是像这样修改markerclusterer.js:


在MarkerClusterer类中添加一个原型click方法,如下所示-我们稍后将在地图initialize()函数中重写此方法:


MarkerClusterer.prototype.onClick = function() { 

    return true; 

};

在ClusterIcon类中,在clusterclick触发器之后添加以下代码:


// Trigger the clusterclick event.

google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);


var zoom = this.map_.getZoom();

var maxZoom = markerClusterer.getMaxZoom();

// if we have reached the maxZoom and there is more than 1 marker in this cluster

// use our onClick method to popup a list of options

if (zoom >= maxZoom && this.cluster_.markers_.length > 1) {

   return markerClusterer.onClickZoom(this);

}

然后,在您的initialize()函数中初始化地图并声明MarkerClusterer对象:


markerCluster = new MarkerClusterer(map, markers);

// onClickZoom OVERRIDE

markerCluster.onClickZoom = function() { return multiChoice(markerCluster); }

其中multiChoice()是您的函数(尚待编写),用于弹出一个信息窗口,其中包含可供选择的选项列表。请注意,markerClusterer对象将传递给函数,因为您将需要此对象来确定该集群中有多少个标记。例如:


function multiChoice(mc) {

     var cluster = mc.clusters_;

     // if more than 1 point shares the same lat/long

     // the size of the cluster array will be 1 AND

     // the number of markers in the cluster will be > 1

     // REMEMBER: maxZoom was already reached and we can't zoom in anymore

     if (cluster.length == 1 && cluster[0].markers_.length > 1)

     {

          var markers = cluster[0].markers_;

          for (var i=0; i < markers.length; i++)

          {

              // you'll probably want to generate your list of options here...

          }


          return false;

     }


     return true;

}


查看完整回答
反对 回复 2019-11-22
  • 3 回答
  • 0 关注
  • 347 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号