可以在Google的示例页面https://developers.google.com/maps/documentation/javascript/examples/drawing-tools上看到此问题。如果缩小到可以看到整个世界的点,并尝试绘制一个矩形,当覆盖超过180度的经度时,它会围绕相反的方向。
我在文档https://developers.google.com/maps/documentation/javascript/drawing中找不到任何改变此行为的方法。有没有办法来解决这个问题?如果没有,我可以使用另一个javascript库来实现这个目标吗?
答案 0 :(得分:1)
我最终实现了自己的绘制方法/选择工具,因为绘图库不支持这个。单击地图将其置于“选择”模式,这将导致矩形在鼠标移动上绘制。单击第二次完成选择并将渲染的矩形保留在地图上。 “魔法”发生在calculateBounds函数中。
self.map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(0,0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
self.rectangle = new google.maps.Rectangle ({
map: null,
clickable: false,
selectable: false,
dragable: true,
fillColor: "#000000",
fillOpacity: 0.2,
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 1
});
google.maps.event.addListener(self.map, 'click', function(e) {
self.select = !self.select;
if (self.select) {
self.startPoint = e.latLng;
} else {
self.drawRectangle(e.latLng);
self.north(self.rectangle.getBounds().getNorthEast().lat().toFixed(15));
self.south(self.rectangle.getBounds().getSouthWest().lat().toFixed(15));
self.east(self.rectangle.getBounds().getNorthEast().lng().toFixed(15));
self.west(self.rectangle.getBounds().getSouthWest().lng().toFixed(15));
}
});
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);
};