在这种情况下,我需要绘制一个覆盖世界50%以上的矩形进行地理选择。
使用gmaps中的默认绘图工具,如果矩形的宽度超过世界地图的50%,它将反转选择。垂直高度没有该大小限制。
是否有任何选项可以禁用此怪异行为或解决此问题的变通办法?
我试图将DragToZoom
与修改后的功能一起使用,但这又麻烦又笨重。
我已经搜索了2天的API文档,但找不到解决方案。
这是a fiddle,演示了地图覆盖率超过50%的问题。
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function (rectangle) {
var position = rectangle.getBounds();
$('#marker-position').append('rectangle => '+position);
});
最佳答案
在搜索gmaps错误报告后,我发现这是180度的限制。使用这个新术语,我找到了以下解决方案:How do I draw rectangle covering more than 180 degrees longitude using google maps drawing library?
我只使用了drawRectangle
侦听器中的mousemove
和calculateBounds
来获得正确的大小。
google.maps.event.addListener(self.map, 'mousemove', function(e) {
if (self.select) {
self.drawRectangle(e.latLng);
}
});
self.calculateBounds = function(newEndPoint) {
var north = self.startPoint.lat() >= newEndPoint.lat() ? self.startPoint.lat() : newEndPoint.lat();
var south = self.startPoint.lat() <= newEndPoint.lat() ? self.startPoint.lat() : newEndPoint.lat();
var sw = new google.maps.LatLng(south, self.startPoint.lng());
var ne = new google.maps.LatLng(north, newEndPoint.lng());
return new google.maps.LatLngBounds(sw, ne);
};
self.drawRectangle = function(newEndPoint) {
self.rectangle.setBounds(self.calculateBounds(newEndPoint));
self.rectangle.setMap(self.map);
};