如何使用谷歌地圖繪圖庫繪製超過180度經度的矩形？

Question

這個問題可以在google的示例頁面https://developers.google.com/maps/documentation/javascript/examples/drawing-tools上看到。如果縮小到可以看到整個世界的點，並嘗試繪製一個矩形，則在覆蓋180度以上的經度時，它將捕捉到相反的方向。

我還沒有找到任何方法在文檔https://developers.google.com/maps/documentation/javascript/drawing中更改此行爲。有沒有辦法來解決這個問題？如果不是有另一個JavaScript庫我可以用來完成這個？

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