如何使用谷歌地图绘图库绘制超过180度经度的矩形？ [英] How do I draw rectangle covering more than 180 degrees longitude using google maps drawing library?

问题描述

这个问题可以在google的示例页面上看到 https：//开发者.google.com /地图/文档/ JavaScript的/例子/绘图工具的。如果缩小到可以看到整个世界的点，并尝试绘制一个矩形，则在覆盖180度以上的经度时，它将捕捉到相反的方向。

在文档 https://developers.google.com/maps/documentation/javascript/drawing 。有没有办法来解决这个问题？如果没有，我可以使用另一个JavaScript库来实现这个功能吗？

解决方案

我最终实现了自己的绘图方法/选择工具因为绘图库不支持这个。点击地图将其放入选择模式，这会导致矩形在鼠标移动时绘制。单击第二次完成选择，并将渲染的矩形留在地图上。 'magic'发生在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（））; 
 
返回新的google.maps.LatLngBounds（sw，ne）; 
}; 
 
 self.drawRectangle = function（newEndPoint）{
 self.rectangle.setBounds（self.calculateBounds（newEndPoint））; 
 self.rectangle.setMap（self.map）; 
}; 
  

The issue can be seen on google's example page https://developers.google.com/maps/documentation/javascript/examples/drawing-tools. If you zoom out to a point where you can see the entire world, and try to draw a rectangle it will snap around to cover the opposite direction when more than 180 degrees of longitude are covered.

I have not found any way to change this behavior in the documentation https://developers.google.com/maps/documentation/javascript/drawing. Is there a way to fix this? If not is there another javascript library I could use to accomplish this?

解决方案

I ended up implementing my own draw method / selection tool because the drawing library does not support this. Clicking the map puts it into 'select' mode which causes the rectangle to draw on mousemove. Clicking a second time completes the selection and leaves the rendered rectangle on the map. The 'magic' happens in the calculateBounds function.

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

这篇关于如何使用谷歌地图绘图库绘制超过180度经度的矩形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！