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

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

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

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

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

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 >
  <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)(转)

时间: 2024-09-30 18:55:38

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

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

房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来是想将房产地图google map的应用记录一个系列,但继1)记录完之后总找不到时间继续记录下去,1)中主要解决了Google Maps JavaScript API V3 与 Google Local Search API两者由于版本问题带来的一系列麻烦,思路是使用一个iframe作为兼容的跳板,

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

房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) google Map的交互基本都是事件驱动的,这表示js是通过生成时间来响应交互的,并且处于监听我们设定的事件,每个 Google Maps API 对象都可导出大量已命名的事件.如果程序想要实现某些事件,则会为这些事件注册 Javascript 事件侦听器,并会在通过在 google.maps.eve

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

房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 以前的房产地图一直都是使用有道地图,虽然有道地图是很好,但是为了更好,还是决定使用google地图来重新开发^_^,下面是一个开发完毕的简单应用http://xf.house.163.com/gz/map/000B.html 1)整合Google Maps JavaScript API V3 与 Goo

【转】Android Google Map API使用的八个步骤

Android Google Map API使用的八个步骤 本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何在地图上,用第三方的组件库,实现气球式显示若干指定位置的功能. 步骤1 创建新的Android 工程 首先打开eclipse新建立一个Android 工程,其中相关参数设置如下: Project name:MallFinder Build 

google map或者高德地图等软件的 AGPS问题

使用google map或者高德地图等软件时.当关闭数据连接时,还是会用到数据流量问题的原因是Google Map 的Gps定位触发了Agps的流程: AGps流程和Agps server交互是用Supl 类型的APN. 可以在agps_profiles_conf2.xml中的dedicated_apn_enable="true" 改为false 来解决

how to add borders for a google map marker 谷歌地图 自定义图钉

If you are not satisfied with default Google map Marker (Default google marker can only be a icon, image or shape), for example adding a border, then you should use richmarker! http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker

how to add borders for a google map marker 谷歌地图 自己定义图钉

If you are not satisfied with default Google map Marker (Default google marker can only be a icon, image or shape), for example adding a border, then you should use richmarker! http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker

如何从Google Map爬数据

我们小组要做的是一款关于体育赛事查询的软件.这款软件涉及到了大量的数据,供用户查询.同时,我们想在这款软件里面通过Google Map的形式将数据展现给用户. Google Map所采用的是Mercator坐标系.在Google Map是以金字塔模型的方式来组织切图文件的,在金字塔模型中,地图被分成若干层,每一层数据的分辨率为上层的4倍(横向与纵向各2倍).同时,每一层数据的分辨率是极其庞大的,并且以指数形 式增加. 如果一次,将一层的数据作为一个文件返回给用户,无论从网络的传输能力.CPU处理

如何将经纬度利用Google Map API显示C# VS2005 Sample Code

原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上,这个做法有两种,最简单的就是直接传值到Google Maps上. 举例来说,当我们知道经纬度后,只要将数据套到以下网址即可. http://maps.google.com/maps?q=25.048346%2c121.516396 在参数q=后面,就可以加上经纬度了. 25.048346是Lati