[英]How to get user's shape from Google Maps JavaScript API V3 and analyze it
On the project I am currently working, I am asking the user to search for a location on a map. 在我当前正在工作的项目上,我要求用户在地图上搜索位置。 When user finds the location, he/she needs to draw a rectangle on the area that he needs information about. 当用户找到位置时,他/她需要在需要其信息的区域上绘制一个矩形。 How can I get the shape(rectangle)
that is drawn on the map as object
for example, so I can use the methods getNorthEast()
, getSouthWest()
and get the proper coordinates of the object? 例如,如何获取在地图上绘制的shape(rectangle)
as object
,因此可以使用getNorthEast()
, getSouthWest()
并获取对象的正确坐标?
What I have been trying is this: 我一直在尝试的是:
google.maps.event.addListener(drawingManager, 'dragend', function(e) { if (e.type == google.maps.drawing.OverlayType.RECTANGLE) { // Send bounds. var rectangleShape = e.overlay; rectangleShape.type = e.type; // var coordinate = rectangleShape.getNorthEast(); -- Won't allow me to use it. // var coordinate = rectangleShape.getBounds().getNorthEast(); -- Won't allow me to use it too. } });
But, as I have written in the code, it won't allow me to use those methods meaning I am doing wrong something. 但是,正如我在代码中所写的那样,它不允许我使用那些方法,这意味着我做错了什么。 Any ideas/code to share with me to solve this? 有什么想法/代码可以与我分享以解决此问题吗?
EDIT: What's inside the drawingManager
编辑:里面的drawingManager
var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.RECTANGLE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE ] }, rectangleOptions: { editable:true, draggable:true, geodesic:true } });
EDIT 2: In the @MrUpsidown
answer I have asked him how to catch events like bounds_changed
on rectangle after moving the rectangle on map or resizing. 编辑2:在@MrUpsidown
答案中,我问他如何在地图上移动矩形或调整大小后如何捕获矩形上的bounds_changed
事件。
So, here is the answer if anyone needs to implement that: 因此,如果有人需要实现此目标,则这是答案:
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(event) { google.maps.event.addListener(event, 'bounds_changed', function(){ if (event.type == google.maps.drawing.OverlayType.RECTANGLE) { var bounds = event.getBounds(); // Here are the new bounds after moving the rectangle around or resizing it. // Rest of the code here. } });
Check the edited post of @MrUpsidown
for another approach how to solve this. 检查@MrUpsidown
的已编辑帖子, @MrUpsidown
了解另一种解决方法。
Regards, Dejan 问候,德扬
If you want the bounds of your overlay, then do this: 如果要覆盖的范围,请执行以下操作:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
var bounds = event.overlay.getBounds();
});
Then you can use bounds.getNorthEast();
然后可以使用bounds.getNorthEast();
etc. 等等
Edit: To reply to your second question: an easy way to listen to more events would be to convert your overlay to a google.maps.Rectangle once you have drawn it: 编辑:回答您的第二个问题:听更多事件的一种简单方法是将覆盖图绘制成google.maps.Rectangle后:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
// Get shape bounds
var bounds = event.overlay.getBounds();
// Remove overlay from map
event.overlay.setMap(null);
// Create a rectangle here with the overlay bounds
});
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
You can get the lat and long with .lat() and .lng() like the following: 您可以使用.lat()和.lng()获得纬度和经度,如下所示:
var contentString = '<b>Rectangle moved.</b><br>' +
'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
'New south-west corner: ' + sw.lat() + ', ' + sw.lng();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.