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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11229711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 12:28:12  来源:igfitidea点击:

check if map markers are within selected bounds

javascriptjquerygoogle-mapsgoogle-maps-api-3

提问by Vince Lowe

I have a map with various markers and i need to be able to draw a rectangle on the map and select the markers which are within the rectangle bounds.

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

So far i have found some great info here: How to get markers inside an area selected by mouse drag?

到目前为止,我在这里找到了一些很好的信息:如何在通过鼠标拖动选择的区域内获取标记?

I have implemented the keymapzoom plugin ok. like so

我已经实现了 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);
});

This gives me the following ((lat,long),(lat,long)) format from the alert(bnds);

这给了我警报(bnds)中的以下((lat,long),(lat,long)) 格式;

I need to know how i can now check if any markers are within this?

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

I already have an object that is storing the markers for another reason. like:

我已经有一个出于另一个原因存储标记的对象。喜欢:

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

which might be useful?

哪个可能有用?

I don't understand how to use the GLatLngBounds and containsLatLng(latlng:GLatLng) as suggested.

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

采纳答案by Vince Lowe

Box/Rectangle Draw Selection in Google Maps

谷歌地图中的框/矩形绘制选择

This was my solution..

这是我的解决方案..

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

回答by Peter Kruithof

Your question is tagged with the v3 version of the Maps API, so I'll assume you are using that version (which you should as v2 is deprecated). Note that some classes and methods are named different than in your question.

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

Bounds are represented with the LatLngBoundsclass. You can perform the containsmethod on an instance of that class to determine if a point lies within those bounds.

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

If you have an object with all your markers, you can loop through them and check each marker, for example:

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

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
    }
}

On a side note, I would store the LatLng object in the markers object when creating them. That way you don't have to create them wherever you need.

附带说明一下,我会在创建它们时将 LatLng 对象存储在标记对象中。这样您就不必在任何需要的地方创建它们。