如何通过鼠标拖动选择区域内的标记？ [英] How to get markers inside an area selected by mouse drag?

问题描述

简要

我想要查找位于矩形区域内的所有标记，方法是将鼠标拖放到地图上。此功能是否支持任何jQuery插件或其他功能？如果没有，我想在我的项目中实现这一点。我认为它会很酷。

详细信息

我使用Google Maps v2，因为我想支持IE 6在我的项目中。

我是Google地图的初学者，并浏览了开发人员指南部分以及一些基本演示和其他SO问题。

这是我的想法 -

• 用户点击地图控件部分的选择区域按钮。这将调用disableDragging（）并且用户准备好进行选择。 （可能是 http://code.google.com /apis/maps/documentation/javascript/v2/controls.html#Custom_Controls 给出了一些想法如何做到这一点）

然后用户做一个区域选择。注意选择开始和选择结束点，并假定它们是矩形的两个对角，找到其中的标记。但是，到目前为止，我没有看到任何工作代码来获取点击点的坐标。我想最好是用经度/纬度作为坐标而不是实际的x-y坐标。这个问题使用jQuery插件的Google Maps API：如何在点击时获得标记的经纬度？讨论获取纬度/经度点击它的标记，但我还没有成功尝试过。 这里是我的问题 -






• 如何在地图上显示矩形选区？ （通常略微灰色且透明）

如何获得点击点的lat / lang（纬度/经度），然后扩展它以获得那些





我对jQuery很有经验，如果使用jQuery插件有一些很好的解决方案他们请让我知道。我看到了 10个jQuery更容易的谷歌地图安装插件，但不知道是否有任何这些将帮助我满足我的要求。





当我有标记列表，我想以在单独的显示部分内填充一些相关信息，以便每当用户选择一些标记时，相应的信息显示在显示部分中。这部分应该更容易。





谢谢


解决方案

a KeyDragZoom 示例http://code.google.com/intl/tr-TR/apis/maps/documentation/javascript/v2/demogallery.htmlrel =nofollow> Google Maps API演示库，以实现矩形选择功能。您可以在这里找到



对于第二个问题，您可以使用 GLatLngBounds 类及其 containsLatLng（latlng ：GLatLng）函数。通过将 GLatLngBounds 对象设置为矩形的边界，您可以使用 containsLatLng 函数测试您的标记。





如果您决定使用KeyDragZoom，请将 dragend 侦听器添加到 getDragZoomObject 会给你一个 GLatLngBounds 对象，你可以使用它来用containsLatLng函数测试你的标记。

  map.enableKeyDragZoom（）; 
 var dz = map.getDragZoomObject（）; 
 GEvent.addListener（dz，'dragend'，function（bnds）{
 //在这里测试你的标记对bnds 
}）; 
  




In Brief
I want to find all the markers which lie within a rectangular area created by dragging the mouse over the map. Is this feature supported by any jQuery plugins or something else? If not, I would like to implement this in my project. I think it would be cool.

Details
I am using Google Maps v2 because I want to support IE 6 in my project.

I am a beginner in Maps and went through the Developer's guide section and some basic demos and other SO questions.

Here is my idea so far -

• User clicks on a "Select an area" button in the controls section of the map. This calls disableDragging() and user is ready to do a selection. (May be http://code.google.com/apis/maps/documentation/javascript/v2/controls.html#Custom_Controls gives some idea how to do this)

• Then user does an area selection. The selection start and selection end points are noted and assuming these as the two opposite corners of the rectangle, the markers within it are found. But, so far I did not see any working code to get the coordinates of the clicked point. I guess it is better to go with latitude/longitude as the coordinates instead of the actual x-y coordinates. This question Google Maps API using jQuery Plugin: How to get a marker's latitude and longitude on click? discusses getting the latitude/longitudes of a marker on clicking it, but I have not successfully tried it yet.

Summary
Here are my questions again -

• How do I display a rectangular selection area over the map ? (generally slight grey and transparent in appearance)

• How to get the lat/lang(latitude/longitude) of the clicked point and then extend it to get those of the selection start and end points.

I am experienced with jQuery and if there are some nice solutions with jQuery plugins them please let me know. I saw this list of 10 jQuery Plugins for Easier Google Map Installation but not sure if any of those would help me meet my requirement.

When I have the list of markers, I would like to populate some related info inside a separate display section, so that every time the user selects some markers, corresponding information is displayed in the display section. That part should easier.

Thanks

解决方案

You can check KeyDragZoom example under Google Maps API Demo Gallery to achieve rectangular selection feature. You can find the documentation here.

For the second problem you can use GLatLngBounds class and its containsLatLng(latlng:GLatLng) function. By setting your GLatLngBounds object to the bounds of your rectangle you can test your markers against it with containsLatLng function.

If you decide to use KeyDragZoom, adding a dragend listener to the getDragZoomObject will give you a GLatLngBounds object which you can use to test your markers against with the containsLatLng function.

map.enableKeyDragZoom();
var dz = map.getDragZoomObject();
GEvent.addListener(dz, 'dragend', function (bnds) {
  // test your markers against bnds here
});

这篇关于如何通过鼠标拖动选择区域内的标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！