直接看代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script type='text/javascript'>
window.οnlοad=function()
{
var map;
var latlng = new google.maps.LatLng(-34.397, 150.644);
function initialize()
{
var mapOptions = {
center: latlng,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var el=document.getElementById("map_canvas");
map = new google.maps.Map(el, mapOptions);
var marker = new google.maps.Marker({
map: map,
position: latlng
});
var sunCircle = {
strokeColor: "#c3fc49",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#c3fc49",
fillOpacity: 0.35,
map: map,
center: latlng,
radius: 15000 // in meters
};
cityCircle = new google.maps.Circle(sunCircle);
cityCircle.bindTo('center', marker, 'position');
}
initialize();
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px;"></div>
</body>
</html>
参考:http://stackoverflow.com/a/12232608/4484798
原文:Google Maps API 以某一经纬度为中心,以某一长度位半径画圆 Draw the radius of a circle