【问题标题】:check if map markers are within selected bounds检查地图标记是否在选定范围内
【发布时间】:2012-06-29 02:12:14
【问题描述】:

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

到目前为止,我在这里找到了一些很棒的信息: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)。

【问题讨论】:

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


    【解决方案1】:

    您的问题使用 Maps API 的 v3 版本进行标记,因此我假设您使用的是该版本(您应该使用该版本,因为 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 对象存储在标记对象中。这样您就不必在任何需要的地方创建它们。

    【讨论】:

    • 是的,它的 v3 api。感谢您的回复彼得。所以我应该能够使用 var bounds = new google.maps.LatLngBounds(bnds); ?
    • 构造函数有两个参数:西南和东北。只需点击我提供的链接。
    • 我明白了,那么如何从我的 bnds 输出中获取 sw 和 ne 参数?
    • 你在地图上画了一个矩形,对吧?似乎您可以使用该数据来计算每个点的纬度/经度,谷歌它。
    • @Raymond LatLngBounds 仅用于矩形(文档说“代表地理坐标中的矩形”)。还有一个Polygon class,您可以使用Poly 实用程序库。
    【解决方案2】:

    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");
            }         
         });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-05-28
      • 2023-03-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-03
      • 2012-09-27
      相关资源
      最近更新 更多