于吉吉的技术博客

房产地图google map的初步应用点滴.1)

google map测距的实现和分析

不断有传闻google map在今年的7月1号之后在大陆停止运营，具体原因是因为天朝的牌照问题，这个就不多讲了，可以发现现在搜房网的地图，和安居客等的地图纷纷都撤下 google map，而重新选择了mapabc或baidu，当然网易房产地图也不例外，现在也在使用mapabc作为网易房产地图的开发，预计将在6月底前上线，到 时再跟大家分享一下mapabc的一些开发实践。

还是说回google map的开发，自从上次建了个qq群就有不少人在问测距怎么实现，当然很多人想的是拿来主义的，当时是拿http://xf.house.163.com /gz/map/000B.html的例子出来，但确实页面上进行了封装也写得比较乱，所以还是比较难以抽离，先给个简单实现的例子：

例子给完了，其中测距的计算是抄了google的示例，想简单拿来应用的到这里就可以结束了，还有点兴趣的可以看看下面的简单分析：

说到测距无非就是线的计算，根据google map api，测距的线性实现我们采用Polyline类，Polyline是折线是地图上的连接线段的线性叠加层，扩展自MVCObject。

测距是由线组成，然后根据一组线的长短计算出线的启动和终点线的距离，根据这个思路，我们定义出
var polyline;
var polylinesArray = [];
其中polyline是当前画出来这条线，polylinesArray是一个数组，当每话出一条线就将这条线push到polylinesArray这个数组中去。

另外一条线其实是由两个点，始点和终点所组成，所以我们也定义一个
var lenArray = [];
lenArray是一个数组，用来记录鼠标点过的每一个点的信息
也就是说整个测距是由每一条线所组成，而一条线是由2个点组成。

思路理清楚了，接着一步一步看

当我们点击了开始测距时，就需要启动一个事件的监听，对整个map的click事件监听
    rule = google.maps.event.addListener(map,"click",function(event){
        addMarker(event.latLng);
    });
当我们在地图上进行点击时，就会新增一个maker点，并且将这个maker压入lenArray数组，以便于后面的计算
function addMarker(location){
...
marker = new google.maps.Marker(myOptions);
...
lenArray.push(marker);
drawOverlay();
接着会调用drawOverlay();使用polyline来画线
    var flightPlanCoordinates = [];
    //将坐标压入路线数组
    if (lenArray) {
        for (i in lenArray) {
            flightPlanCoordinates.push(lenArray[i].getPosition());
        }
    }
    var polylineOptions = {
        path : flightPlanCoordinates,
        map : map,
        strokeColor : "#FF0000",
        strokeOpacity : 1.0,
        strokeWeight : 2
    };
    polyline = new google.maps.Polyline(polylineOptions);

其中polylineOptions的path参数是折线坐标的有序序列。可以使用一个简单的 LatLng 数组或者 LatLng 的 MVCArray 指定此路径。请注意，如果您传

递简单的数组，则它会转换为 MVCArray。在 MVCArray 中插入或删除 LatLng 将自动更新地图上的折线。
flightPlanCoordinates数组用于存储在上面我们定义的lenArray数组的坐标值，每点击一次就压入一对坐标值。
strokeColor和strokeOpacity，strokeWeight是一些样式的参数，如指定线条的宽度等等。
最后我们将定义的polyline进行setMap，在地图上展现，并将polyline压入到polylinesArray数组中去。
    polyline.setMap(map);
    polylinesArray.push(polyline);
到这里，线和点的展现已经完成了，接下来是需要将这些点线转换成我们需要的距离值。

google.maps.Polyline.prototype.getLength = function() {
    var d = 0;
    var path = this.getPath();
    var latlng;
    for (var i = 0; i < path.getLength() - 1; i++) {
        latlng = [path.getAt(i), path.getAt(i + 1)];
        d += latlng[0].distanceFrom(latlng[1]);
    }
    return d;
}

这里需要讲明的是this.getPath();它的说明是检索第一条路径。并且返回值是一组MVCArray.<LatLng>，也就是实际存储了一条线的坐标值，在这里取出这些坐标的数组，并且进行循环distanceFrom计算

google.maps.LatLng.prototype.distanceFrom = function(latlng) {
    var lat = [this.lat(), latlng.lat()]
    var lng = [this.lng(), latlng.lng()]
    var R = 6378137;
    var dLat = (lat[1] - lat[0]) * Math.PI / 180;
    var dLng = (lng[1] - lng[0]) * Math.PI / 180;
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat[0] * Math.PI / 180) * Math.cos(lat[1] * Math.PI / 180) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return Math.round(d);
}
这段计算实际上是抄自google map示例的，是将我们的坐标值转换成我们需要计算的距离值，这里就不分析，有兴趣可以玩玩，没兴趣就直接抄过去吧。

结果出来了，这个就是我们需要的测距的距离，当然你也可以用其他方式进行展现

alert((polyline.getLength()/1000).toFixed(3) + "km");