谷歌地图api检查标记在界限范围内

时间:2016-03-23 08:17:36

标签: javascript google-maps google-maps-api-3

尝试检查标记是否在边界内并触发onclick事件。但是,如果使用getPosition()和contains()来检查标记是否在绑定范围内,那就没有运气了。

有人可以指出如何检查标记是否在边界内?

 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 个答案:

答案 0 :(得分:0)

可能只有一组蜘蛛标记,而且点击一个蜘蛛标记会取消当前的蜘蛛标记组。

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

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>