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的例子出来，但确实页面上进行了封装也写得比较乱，所以还是比较难以抽离，先给个简单实现的例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>163网易房产</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(23.116193,113.374525);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
var polyline;
var polylinesArray = [];
//距离标记数组
var lenArray = []; 
var rule = null; 
 //距离
function getDistance(){
    //启动整个地图的click侦听
    rule = google.maps.event.addListener(map,"click",function(event){
        addMarker(event.latLng);
    });
}
//添加新标记
function addMarker(location){
    //标记选项
    var myOptions = {
        position : location,
        draggable :false,
        map : map,
    };
    marker = new google.maps.Marker(myOptions);
    //将标记压入数组
    lenArray.push(marker);
    //计算距离 
    drawOverlay();
}
//画出路径覆盖层
    function drawOverlay(){
    //路线数组
    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);
    //清除原有折线路径
    if (polylinesArray) {
        for (i in polylinesArray) {
            polylinesArray[i].setMap(null);
        }
        polylinesArray = [];
    }
    polyline.setMap(map);
    polylinesArray.push(polyline);
    alert((polyline.getLength()/1000).toFixed(3) + "km");
}
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.maps.Marker.prototype.distanceFrom = function(marker) {
    return this.getPosition().distanceFrom(marker.getPosition());
}
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;
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 500px; height: 400px"></div>
  <a href="#this" onclick="getDistance();">开始测距</a>
</body>
</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");

只要阅读google api和自己思路清楚，一个测距的demo很快就完成了，稍加装饰基本就可以应用于生产上

房产地图google map的初步应用点滴.4)(转)的更多相关文章

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

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

  2. 房产地图google map的初步应用点滴.2)(转)

    房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来 ...

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

    房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 以前 ...

  4. 谷歌地图实现车辆轨迹移动播放(google map api)

    开发技术:jquery,js baidu map api,json,ajax QQ1310651206 谷歌地图(google map api)实现车辆轨迹移动播放(google map api)

  5. Android Google Map API使用的八个步骤

    本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何 ...

  6. Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解

    在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...

  7. Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  8. Google Map API v2 步步为营（一） ----- 初见地图

    官方文档:https://developers.google.com/maps/documentation/android/start?hl=zh-CN 先谷歌后百度.使用google的api基本上按 ...

  9. arcgis api for silverlight使用google map等多个在线地图

    原文 http://blog.csdn.net/leesmn/article/details/6820245 无可否认,google map实在是很漂亮.可惜对于使用arcgis api for si ...

随机推荐

  1. linux下永久添加静态路由

    在linux下永久添加静态路由有两种方法: 添加路由的命令: 1,route add route add -net 192.56.76.0 netmask 255.255.255.0 dev eth0 ...

  2. [leetcode]Copy List with Random Pointer @ Python

    原题地址:https://oj.leetcode.com/problems/copy-list-with-random-pointer/ 题意: A linked list is given such ...

  3. 一行代码轻松实现拖动效果[JQuery]

    写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上 实现拖动效果.   $(document ...

  4. GoLang中面向对象的三大特性

    有过 JAVA 语言学习经历的朋友都知道,面向对象主要包括了三个基本特征:封装.继承和多态.封装,就是指运行的数据和函数绑定在一起,JAVA 中主要是通过 super 指针来完成的:继承,就是指 cl ...

  5. PHPnow For ASP&&ASP.NET&&MongoDB&&MySQL支持VC6.0编译器&&MySQL升级

    可能和大家熟悉的是LAMP,Linux+Apache+Mysql+PHP,在Windows上,可能大家比较熟悉的是WAMP,Windows+Apache+Mysql+PHP,这是一个集成环境,说到集成 ...

  6. IOS网络访问详解

    第一.访问网络的方式 同步请求:数据的请求过程是由主线程发起的,网络加载需要一定的时间,因此会堵塞主线程 异步请求:数据的请求在多线程中完成 同步请求无法取消,异步请求的过程中可以取消,同步请求无法监 ...

  7. .NET-"/"应用程序中的服务器错误

    当出现这个问题的时候,就在web.config文件中加上代码:<customErrors mode="Off"/> 然后重新访问站点就能看到问题所在了,例如我的错误显示 ...

  8. [转]DOM 中 Property 和 Attribute 的区别

    angular的文档: https://angular.io/guide/template-syntax#property-binding https://blog.csdn.net/sunq1982 ...

  9. Transform导入数据源TR1008错误

    cognos在建设初期开发者们都常常遇到的一个问题,在这里做一下小小的总结. iqd作为Transform的数据源导入数据的时候遭遇TR1008错误 注意: 从报错的内容可以看出transform不能 ...

  10. ML—朴素贝叶斯

    华电北风吹 日期:2015/12/12 朴素贝叶斯算法和高斯判别分析一样同属于生成模型.但朴素贝叶斯算法须要特征条件独立性如果,即样本各个特征之间相互独立. 一.朴素贝叶斯模型 朴素贝叶斯算法通过训练 ...