使用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);
     });
}

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

 

评论

1 楼 jklzou3 2013-11-26  

求完整列子，麻烦发我邮箱[e-mail]