如何在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？

回答

相关问题