百度地图API开发一——仿照现有测距实现测量面积功能

   最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求。测量距离百度给出了封装好的javascript包——BMapLib.DistanceTool,效果如下:

这个效果体验很好;测量面积也给出了开源javascript包——BMapLib.DrawingManger,如下:

但这个效果和体验就很差了。客户希望测量面积能实现和测距一样的效果体验(鼠标在移动绘制过程中实时显示绘制面积,且样式效果要一样),经过一番折腾,修改了百度测距的javascript包,终于搞定。先上效果图:

实现方法:

主要修改了DistanceTool开源包里面的鼠标点击事件distClick和鼠标移动事件distMove这两个方法。

1、通过单击事件distClick获取构造面的path,用到Polygon的setPath方法,然后加到地图中,并通过计算该Polygon的面积显示最终双击结束后提示框的总面积;

2、通过移动事件distMove获取鼠标移动过程的位置点point,利用Polygon类的setPositionAt方法生成动态的面。这一步需要计算鼠标移动过程中的实时面积,构造一个临时面polygon,并不需要加到地图中,在鼠标移动过程中将移动点point加到临时面path中,计算该Polygon的面积即为临时面积。

注:计算Polygon的面积采用百度开源库GeoUtils,BMapLib.GeoUtils.getPolygonArea方法。

如有不对之处,欢迎批评指正!

联系方式:QQ:1085634689

 

时间: 2024-08-06 03:43:14

百度地图API开发一——仿照现有测距实现测量面积功能的相关文章

基于MFC与第三方类CWebPage的百度地图API开发范例

在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地图坐标标注为范例讲解百度地图API开发 1.新建一个工厂MFC工程取名为GeoDemo 2.选择为基于对话框的工程 3.创建成功如下 4.简单调整页面布局 5.在界面插入一个浏览器控件 6.插入之后的效果 7.先运行一下看看 8.接下来我们写一个简单的html页面,代码大概如下 其中也包括一个jav

深入浅出百度地图API开发系列(1):前言

百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能给想使用百度地图API的开发者带来一点帮助的话,那就太好了,也希望大家能够互相交流,共同学习. 写在前面的话:如果各位真的想深入了解地图的JSAPI,首先一些基础的GIS概念必不可少,GIS就是地理信息系统,可能很多程序猿没听过,简单地说,GIS就是通过计算机软件技术将地理信息进行可视化管理,地图就

android 基于百度地图api开发定位以及获取详细地址

一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView控件必须使用来自百度库封装好的com.baidu.mapapi.MapView .设计代码如下: Xml代码   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&q

百度地图API开发:大量坐标点进行分组聚合

leaflet具有markersCluster(标点聚合)的插件非常好用,偶然看到百度地图也有标点聚合开源库,尝试一下,先上效果图: 点此打开交互网页 总结: 1.优点: 百度地图原生的火星坐标系和国内经过偏移的经纬度能完美歪在一起: 网络访问速度比open street map快: 地图信息相对丰富: 2,缺点: 说明文档不是很详细,自定义分组颜色应该有,没找到说明文档: 程序性能不高,点击聚合点会冻结1秒钟的感觉: 美感一般: 实现代码如下: var map = new BMap.Map("

百度地图api开发:根据坐标获得地理描述地址

// 创建地理编码实例              var myGeo = new BMap.Geocoder();              // 根据坐标得到地址描述            myGeo.getLocation(point, function(result){            var boundary = result.addressComponents.city+result.addressComponents.district;             getBound

【百度地图API】如何激发手机的高分辨率

原文:[百度地图API]如何激发手机的高分辨率 摘要:不少用户使用百度地图API开发在移动浏览器上的应用时发现,明明自己的手机是高分辨率的,但是显示出来的地图却比较模糊,甚至“看不清楚”.接下来,我们要学习如何激发手机浏览器的高分辨率功能. -------------------------------------------------------------------------------- 以安卓手机为例,我们使用PhoneGap来写一段API代码. 代码A: <!DOCTYPE ht

PictureShare开发(一)百度地图API

Android SDK v2.4.1 百度地图 Android SDK是一套基于Android 2.1及以上版本设备的应用程序接口. 您可以使用该套 SDK开发适用于Android系统移动设备的地图应用,通过调用地图SDK接口,您可以轻松访问百度地图服务和数据, 构建功能丰富.交互性强的地图类应用程序. 百度地图Android SDK提供的所有服务是免费的,接口使用无次数限制.您需申请密钥(key)后, 才可使用百度地图Android SDK.任何非营利性产品请直接使用,商业目的产品使用前请参考

使用百度地图API进行Android地图应用开发(Eclipse)

随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. 本文讨论怎样导入百度地图SDK. 主要分为server端配置和client配置. (1)首先要有一个百度账号,账号能够去百度官网申请,然后登陆:http://developer.baidu.com/map/index.php? title=%E9%A6%96%E9%A1%B5   .使用自己的账号p

C#微信开发之旅(七):根据经纬度获取地址(百度地图Api)

开发过程中遇到这样的需求,根据用户的地理位置不同,显示不同区域的产品. 这里用到了微信:获取用户地理位置 的功能,(每隔5秒上报 或 进入回话时上报一次),我们根据微信推送过来的经纬度,来转换成实际地址,这里用到的是百度地图Api(要用的话先申请百度ak). PS:微信的这个功能很不稳定,靠它不靠谱,经常不推送...(后来加了手动定位,百度地图Web定位组件 还不错,不是广告!0.0) #region 根据经纬度 获取地址信息 BaiduApi /// <summary> /// 根据经纬度