检查地图标记是否在选定范围内

时间:2012-06-27 15:24:17

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

我有一张带有各种标记的地图,我需要能够在地图上绘制一个矩形并选择矩形边界内的标记。

到目前为止,我在这里找到了一些很棒的信息:How to get markers inside an area selected by mouse drag?

我已经实现了keymapzoom插件。像这样

    $('#dispatcher').gmap3({action:'get'}).enableKeyDragZoom({
        boxStyle: {
          border: "dashed black",
          //backgroundColor: "red",
          opacity: 0.5
        },
        paneStyle: {
          backgroundColor: "gray",
          opacity: 0.2
        }
  });
var dz = $('#dispatcher').gmap3({action:'get'}).getDragZoomObject();
google.maps.event.addListener(dz, 'dragend', function (bnds) {
  alert(bnds);
});

这给了我以下内容 ( lat,long ),( lat,long ))格式来自警报(bnds);

我需要知道现在如何检查是否有任何标记?

由于其他原因,我已经有一个存储标记的对象。像:

    markers[name] = {};
    markers[name].lat = lati;
    markers[name].lng = longi;

可能有用吗?

我不明白如何按照建议使用GLatLngBounds和containsLatLng(latlng:GLatLng)。

2 个答案:

答案 0 :(得分:10)

您的问题已使用版本的Maps API标记,因此我假设您使用的是该版本(您应该弃用v2)。请注意,某些类和方法的名称与您的问题不同。

界限用LatLngBounds类表示。您可以对该类的实例执行contains方法,以确定某个点是否位于这些边界内。

如果您的对象包含所有标记,则可以遍历它们并检查每个标记,例如:

var bounds = new google.maps.LatLngBounds(sw, ne);
for (var a in markers) {
    if (bounds.contains(new google.maps.LatLng(markers[a].lat, markers[a].lng)) {
        // marker is within bounds
    }
}

在旁注中,我会在创建它们时将LatLng对象存储在markers对象中。这样,您无需在任何需要的地方创建它们。

答案 1 :(得分:3)

Box/Rectangle Draw Selection in Google Maps

这是我的解决方案..

     google.maps.event.addListener(dz, 'dragend', function(e) { //important listener          
      for(var i = 0; i < markers.length; i++){ // looping through my Markers Collection       
        if(e.contains(markers[i].position))
            console.log("Marker"+ i +" - matched");
        }         
     });