如何使用Google地圖上的一次點擊添加一個圓並獲取圓的座標和半徑？

我想在地圖上點擊一下就可以創建一個圓圈，我也想收集圓圈的緯度/經度信息以及它的半徑。請告訴我如何使用JavaScript來做到這一點。如何使用Google地圖上的一次點擊添加一個圓並獲取圓的座標和半徑？

問候，馬杜

2014-04-15 Madhu

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Circles</title> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
// This example creates circles on the map with fixed radius of 5km 

var cityCircle; 

function initialize() { 
// Create the map. 
var mapOptions = { 
zoom: 14, 
center: new google.maps.LatLng(37.09024, -95.712891),//can use your center 
mapTypeId: google.maps.MapTypeId.TERRAIN 
}; 

var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

google.maps.event.addListener(map, "click", function (e) { 

//lat and lng is available in e object 
var latLng = e.latLng; 
// Construct the circleOptions 
var circleOptions = { 
    //optional to modify 
/* strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35,*/ 
    map: map, 
    center: latLng, 
    radius: 5000 //in meters apporx. 
}; 
// Add the circle for this city to the map. 
cityCircle = new google.maps.Circle(circleOptions); 
}); 

} 

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

</script> 
</head> 
<body> 
<div id="map-canvas"></div> 
</body> 
</html>

來源

2014-04-15 10:29:17

感謝您的答覆，我們怎樣才能捕捉到緯度/經度和半徑。 – Madhu

如何使用Google地圖上的一次點擊添加一個圓並獲取圓的座標和半徑？

回答

相關問題