运用Google map 绘制圆形

使用Google map 绘制圆形

googl地图提供了google.maps.Circle类实现圆形叠加层的显示，详细的方法和属性可以参考google map Api.
实现绘制圆形只要知道圆心和半径即可，半径可以通过两个坐标点之间的距离求的。

根据两个经纬度来计算半径，方法如下：

function calculationDistance(lat1, lon1, lat2, lon2) {    var R = 6371;//地球半径 km   ?var dLat = (lat2 - lat1) * Math.PI / 180;    var dLon = (lon2 - lon1) * Math.PI / 180;    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *        Math.sin(dLon / 2) * Math.sin(dLon / 2);    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));    var d = R * c;    return d;}

?

?对返回的值可以进行处理一下：

function getDistance(distance) {    //大于1 保留两位小数    if (distance > 1) return distance.toFixed(2) + "km";    //小于1 表示不到1km，使用单位"m"    else if (distance <= 1) return Math.round(distance * 1000) + "m";}

?得到两点之间的半径了，就可以使用google map api 提供的方法显示圆形。

var drawCircle = function () {       var circle;    google.maps.event.addListenerOnce(mapObj, "click", function (event) {          var radius = 0;        var markerCenter = new google.maps.Marker({ position: event.latLng, map: mapObj, draggable: false });        var markerRadius = new google.maps.Marker({ position: event.latLng, map: mapObj, draggable: true, title: title });          google.maps.event.addListener(markerRadius, 'drag', function (MouseEvent) {            radius = calculationDistance(markerCenter.getPosition().lat(), markerCenter.getPosition().lng(), MouseEvent.latLng.lat(), MouseEvent.latLng.lng());            circle.setRadius(radius * 1000);         });        var circleOptions = {            map: mapObj,            center: event.latLng,            radius: radius,            strokeWeight: 0        };         circle = new google.maps.Circle(circleOptions);     });}

? 在页面中添加按钮触发画圆事件，拖动标注进行画圆。

?