2012-06-09 34 views
3

我正在嘗試使用Google地圖的自動完成功能,並將結果偏置爲LatLngBounds。我希望能夠在島嶼周圍繪製矩形(例如夏威夷羣島),並以此方式獲取LatLngBounds。有什麼工具可以幫助我嗎?LatLngBounds - 如何獲取SW和NE點

回答

12

很久以前,我寫了一個「縮放窗口」,我改編爲您使用。這只是地圖和矩形聽衆。

http://jsfiddle.net/yV6xv/16/embedded/result/

看到代碼:

http://jsfiddle.net/yV6xv/16/

要使用它,第一次放大和平移手動到您的島嶼。您要選擇的整個區域必須在屏幕上可見。

然後單擊一次以定義一個矩形角。將鼠標移向對角線的對角。 (矩形選擇將出現)。再次單擊以定義矩形區域。地圖上方的textarea應該爲您提供具有SW和NE點的選定LatLngBounds。

當試圖包含國際日期行時,它的行爲不符合預期。

var map; 

    var mapOptions = { 
    center: new google.maps.LatLng(0.0, 0.0), 
    zoom: 2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var bounds; 
    var pt1, pt2; 
    var rect; 

    function toLatLng(lat, lng) { 
    return new google.maps.LatLng(lat, lng); 
    } 

    function toBounds(j,k) { 
    var pts = []; 
    var latMin, latMax, lngMin, lngMax; 
    var sw, ne; 

    latMin = Math.min(j.lat(), k.lat()); 
    latMax = Math.max(j.lat(), k.lat()); 

    lngMin = Math.min(j.lng(), k.lng()); 
    lngMax = Math.max(j.lng(), k.lng()); 

    sw = toLatLng(latMin, lngMin); 
    ne = toLatLng(latMax, lngMax); 
    return new google.maps.LatLngBounds(sw, ne); 
    } 

    function initialize() { 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    rect = new google.maps.Rectangle({ 
     fillColor: "#FFFF00", 
     fillOpacity: 0.3, 
     strokeColor: "#0000FF", 
     strokeWeight: 2 
    }); 

    // Activate the box 
    google.maps.event.addListener(map, 'click', function(event) { 
     pt1 = event.latLng; 
     rect.setMap(map); 
    }); 

    // Modify the box's size 
    google.maps.event.addListener(map, 'mousemove', function(event) { 
     if(rect.getMap() == map) { 
     rect.setBounds(toBounds(pt1, event.latLng)); 
     } 
    }); 

    // Remove the zoom window and zoom in 
    google.maps.event.addListener(rect, 'click', function(event) { 
     rect.setMap(null); 
     pt2 = event.latLng; 
     myBounds = toBounds(pt1, pt2); 

     document.getElementById("selectedBounds").value = "new google.maps.LatLngBounds(new google.maps.LatLng" + myBounds.getSouthWest() + ", new google.maps.LatLng" + myBounds.getNorthEast() + ");"; 
    }); 

    // Allows shrinking the box 
    google.maps.event.addListener(rect, 'mousemove', function(event) { 
     if(rect.getMap() == map) { 
     rect.setBounds(toBounds(pt1, event.latLng)); 
     } 
    }); 
    } 

HTML

<textarea id="selectedBounds" cols="60" rows="4"></textarea> 
<div id="map_canvas"></div>​ 
+0

真棒答案;我希望我能給這個例子加分。也許你也可以在這裏發佈代碼,以便將來不會丟失。 –

+0

@WoutervanNifterick好主意,感謝支持:) –

+0

這個工具正是我所希望的。你應該把它放在網站上,以便其他人可以使用它。謝謝! – StackOverflowNewbie

相關問題