如何在Google地圖上點擊矩形時獲得latlng？

我在Google地圖中創建了矩形。如何在Google地圖上點擊矩形時獲得latlng？

當我點擊外部矩形時，我得到了lat，lng。

但是當我點擊矩形時，我無法獲取經緯度。

這裏是我的代碼：

var rectangle; 
var map; 
var infoWindow; 

function initialize() { 
    function calcBounds(center, size) { 
    var n = google.maps.geometry.spherical.computeOffset(center, size.height/2, 0).lat(), 
     s = google.maps.geometry.spherical.computeOffset(center, size.height/2, 180).lat(), 
     e = google.maps.geometry.spherical.computeOffset(center, size.width/2, 90).lng(), 
     w = google.maps.geometry.spherical.computeOffset(center, size.width/2, 270).lng(); 
    return new google.maps.LatLngBounds(new google.maps.LatLng(s, w), 
     new google.maps.LatLng(n, e)); 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 12, 
    center: new google.maps.LatLng(40.689055, -89.584747), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 



    var rectangle = new google.maps.Rectangle({ 
    strokeColor: '#000000', 
    strokeOpacity: 1, 
    strokeWeight: 1, 
    fillColor: '#008000', 
    fillOpacity: .2, 
    editable: false, 
    draggable: false, 
    map: map, 
    bounds: calcBounds(new google.maps.LatLngBounds(
     new google.maps.LatLng(40.626805, -89.539396), 
     new google.maps.LatLng(40.626055, -89.538507)).getCenter(), new google.maps.Size(875, 875)) 
    }); 



    var rectangle = new google.maps.Rectangle({ 
    strokeColor: '#000000', 
    strokeOpacity: 1, 
    strokeWeight: 1, 
    fillColor: '#008000', 
    fillOpacity: .2, 
    editable: false, 
    draggable: false, 
    map: map, 
    bounds: calcBounds(new google.maps.LatLngBounds(
     new google.maps.LatLng(40.750555, -89.633655), 
     new google.maps.LatLng(40.749805, -89.632766)).getCenter(), new google.maps.Size(875, 875)) 
    }); 



    var rectangle = new google.maps.Rectangle({ 
    strokeColor: '#000000', 
    strokeOpacity: 1, 
    strokeWeight: 1, 
    fillColor: '#008000', 
    fillOpacity: .2, 
    editable: false, 
    draggable: false, 
    map: map, 
    bounds: calcBounds(new google.maps.LatLngBounds(
     new google.maps.LatLng(40.626805, -89.519833), 
     new google.maps.LatLng(40.626055, -89.518943)).getCenter(), new google.maps.Size(875, 875)) 
    }); 
    google.maps.event.addListener(map, 'click', function(event) { 
    alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng()); 
    }); 

} 
google.maps.event.addDomListener(window, 'load', initialize);

Here is example 任何建議表示讚賞。

感謝

來源

2014-09-03 Mr7-itsurdeveloper

你的map做您可以將收聽到rectangle。這裏http://jsfiddle.net/0c9rnyf8/5/

來源

2014-09-03 06:35:29

運動比利，我用這個代碼通過使用矩形代替地圖，問題是，我高600個rectangles.and你的名字改變rct1，rct2等.. – 2014-09-03 06:42:05

你不能有3個具有相同名稱的不同變量，並希望通過使用相同名稱將一個偵聽器附加到所有這些變量。當你這樣做的時候，監聽器被附加到最後一個名字爲'rectangle'的變量上。其他選項是在聲明像http://jsfiddle.net/0c9rnyf8/7/ 這樣的每個變量之後添加監聽器，或者甚至更好地避免一遍又一遍重複編寫同一個監聽器使其成爲這裏的函數http： //jsfiddle.net/0c9rnyf8/8/ – 2014-09-03 06:55:32

好的，這也是對的，我找到了另外一個解決方案。因爲我用循環創建了retangles，所以我可以給每個矩形的名稱，甚至可以用循環來點擊。 – 2014-09-03 06:58:24

您需要點擊事件添加到您的每一個矩形。例如：

google.maps.event.addListener(rectangle, 'click', function(event){ 
    alert("Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng()); 
});

來源

2014-09-03 06:35:12 alpinescrambler

google.maps.event.addListener(rectangle, 'click', function(event){ alert("Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng()); });

例子我已經嘗試過這一點，但並不work.you可以檢查。 – 2014-09-03 06:43:07

然後創建一個函數處理程序，然後遍歷矩形數組並添加處理程序...請參閱：http://jsfiddle.net/0c9rnyf8/9/ – alpinescrambler 2014-09-03 07:00:47

好的，Thanx，請通過Sport Billy檢查此解決方案。我只是把代碼放在循環中，這個代碼在每個矩形下。在這裏檢查http://jsfiddle.net/0c9rnyf8/7/ – 2014-09-03 07:04:42

如何在Google地圖上點擊矩形時獲得latlng？

回答

相關問題