2011-10-31 122 views
1

我試圖讓人們在Google地圖上繪製一個矩形並存儲bottomLeft和topRight座標。使用Google地圖進行地理圍欄效果

我知道我可以繪製一個矩形codewise(參見:http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/reference.html#Rectangle),但在此之前我可以從我的數據庫加載邊界的人需要定義它自理第一關當然:)

所以我的問題是,如何我可以讓人們在Google地圖上繪製一個矩形(API v3)並存儲bottomLeft和topRight角的座標嗎?

回答

3

已經通過調查活動來運作。花了我很多時間,使:)

這是多麼我已經做到了的,它需要人:

function mapsInitialize() 
{ 
    startPoint = new google.maps.LatLng(lat,lon); 
    options = { zoom: 16, center: startPoint, mapTypeId: google.maps.MapTypeId.HYBRID}; 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 


    google.maps.event.addListener(map, 'click', function(event) { 
     if (drawing == true){ 
      placeMarker(event.latLng); 
      if (bottomLeft == null) { 
       bottomLeft = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa); 
      } 
      else if (topRight == null){ 
       topRight = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa); 
       drawing = false; 
       rectangle = new google.maps.Rectangle(); 

       var bounds = new google.maps.LatLngBounds(bottomLeft, topRight); 

       var rectOptions = { 
        strokeColor: "#FF0000", 
        strokeOpacity: 0.8, 
        strokeWeight: 2, 
        fillColor: "#FF0000", 
        fillOpacity: 0.35, 
        map: map, 
        bounds: bounds 
       }; 
       rectangle.setOptions(rectOptions); 
      } 
     } 
    }); 
} 

function placeMarker(location) { 
    var marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
} 
2

如果我正確理解你 - 你需要一種讓用戶輸入一些折線/多邊形的方法。如果是這樣 - 看看這個example,通過點擊地圖創建多邊形。它使用了一些類PolygonCreator和jquery。您可以採用這種方法,並將結果保存在表單字段中(可能有多種選項:JSON或您自己的序列化方法)

如果您只需要在地圖上顯示多邊形, geometry.encoding library的優勢,並將編碼的多段線存儲到數據庫中。或者,如果您打算使用空間查詢(例如 - 檢測某個點是否落入您的多邊形),則最好使用某種空間擴展:MySQL spatial extensions,PostGIS等。在MySQL中,您可以將折線存儲到PolylinePolygon類型列,它基於OpenGIS格式。坦白地說,這裏的stackoverflow是一大堆相關的信息。

相關問題