Google Map API复选标记在范围内

新先生

尝试检查标记是否在界限内并触发onclick事件。但是,使用getPosition()和contain()尝试检查标记是否在范围内是没有运气的。

有人可以指出如何检查标记是否在范围内吗?

 function _onMapZoom () {
            console.log('testing')
            if(map.zoom < mcOptions.maxZoom){
                return;
            }

            var mapMarkers = oms.markersNearAnyOtherMarker();
            if (mapMarkers.length <= 0) {
                return;
            }

            var bounds = map.getBounds();
            var ne = bounds.getNorthEast(); // LatLng of the north-east corner
            var sw = bounds.getSouthWest(); // LatLng of the south-west corner
            var nw = new google.maps.LatLng(ne.lat(), sw.lng());
            var se = new google.maps.LatLng(sw.lat(), ne.lng());

            for (var i = 0; i < mapMarkers.length; i++) {
                var element = mapMarkers[i];

                //CHECK IF LAT LON OF MARKER IS WITHIN BOUNDS
                var markerIsOrNotInBounds = map.getBounds().contains(mapMarkers.getPosition());
                console.log(markerIsOrNotInBounds)

                if (markerIsOrNotInBounds) {
                    continue;
                }

                gm.event.trigger(marker[i], 'click');
            }
        } 
莫勒博士

可能只有1组蜘蛛标记,此外,单击一个蜘蛛标记将使当前的蜘蛛标记不分散。

解决方案:触发点击后,立即离开该功能。

google.maps.event.addDomListener(window,'load',function() {
      var gm  = google.maps,
          map = new gm.Map(document.getElementById('map_canvas'), {
                  center: new gm.LatLng(50, 0), 
                  zoom: 6
                }),
          oms = new OverlappingMarkerSpiderfier(map,
                {markersWontMove: true, markersWontHide: true}),
          places=[{lat:50,lng:0},{lat:51,lng:-1},{lat:50,lng:1}];

      //some random markers
      for(var p=0;p<places.length;++p){
        for (var i = 0; i < 10; i++) {
          (function(index){
          var marker=new gm.Marker({map:map,
                                    position:{lat:(Math.random()*.1)+places[p].lat,
                                              lng:(Math.random()*.1)+places[p].lng}});
          oms.addMarker(marker);
          })(i)
        }
      }
      
      
      function _onMapZoom () {
        var bounds  = map.getBounds(),
            markers = oms.markersNearAnyOtherMarker();
        for(var i=0;i<markers.length;++i){
          if(//when marker is within map-bounds 
              bounds.contains(markers[i].getPosition())
             ){
            gm.event.trigger(markers[i],'click',{latLng:markers[i].getPosition()});
            //no need to trigger further clicks
            return;
          }
        }
      }
      
      //wait until map-projection is available  until you set the listener
      
      gm.event.addListenerOnce(map,'idle',function(){
        gm.event.addListener(this,'zoom_changed',_onMapZoom)
        gm.event.trigger(this,'zoom_changed');
      });
      
    });
html,body,#map_canvas{height:100%;margin:0;padding:0}
<script src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
  <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<div id="map_canvas"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在30公里范围内,从用户当前位置显示Google Map API JS V3上最近的多个标记

来自分类Dev

Google Map API错误

来自分类Dev

Google Map Maker API?

来自分类Dev

过滤位于Google地图范围内的标记

来自分类Dev

更改复选框时在Google Map上设置标记

来自分类Dev

底部表格内的Google Map

来自分类Dev

Google Map是否需要API?

来自分类Dev

Google Map javascript API密钥

来自分类Dev

Google Map是否需要API?

来自分类Dev

分组集群Google Map API

来自分类Dev

Google Map API如何工作?

来自分类Dev

显示Google Map onclick事件-Google Map API

来自分类Dev

使用Google Map API在Google Map上标记多个位置

来自分类Dev

使用Google Map API将视频附加到标记

来自分类Dev

使用Google Map API上的当前位置更新标记

来自分类Dev

包含标记的Google Map API自定义叠加层

来自分类Dev

Google Map API在信息窗口中显示标记位置

来自分类Dev

如何更改Google Map API可拖动标记的颜色?

来自分类Dev

使用 javascript api google map 从 json 导入标记

来自分类Dev

选择所有Google Map标记

来自分类Dev

Google Map标题标记或指示器

来自分类Dev

多个标记Google Map iOS SDK

来自分类Dev

Android Google Map自定义标记

来自分类Dev

iOS Google Map自定义标记

来自分类Dev

放大标记Google Map V2

来自分类Dev

带有多个标记的AngularJS Google Map

来自分类Dev

外部链接的Google Map点击标记

来自分类Dev

Android Google Map自定义标记

来自分类Dev

iOS Google Map自定义标记