最近做了一个百度地图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

 

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

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

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  2. 深入浅出百度地图API开发系列(2):创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

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

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  4. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  5. 深入浅出百度地图API开发系列(3):模块化设计

    在前面两张简单介绍了百度地图API的基础知识和使用之后,我们来分析一下百度地图API的基本架构,了解一下基本架构可以帮助我们更清晰的了解API的功能和调用过程,也就可以帮助我们在实际开发中可以更方便的 ...

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

    一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView ...

  7. 百度地图API开发----手机地图做导航功能

    第一种方式:手机网页点击打开直接进百度地图APP <a href="baidumap://map/direction?mode=[transit:公交,driving:驾车]& ...

  8. 百度地图API开发的快速使用和大量坐标点操作【点聚合,海量点,mapv】

    快速上手 注意:本篇文章代码是基于 百度地图 JavaScript API v3.0 的条件下编写,GL版本可能稍有变化. 地图嘛,很重要的一部分就是坐标经纬度了: 经度: 英文 longitude ...

  9. 百度地图API开发

    1.首先申请百度地图秘钥 http://lbsyun.baidu.com/ 2.需要填一个申请的界面 3.申请后会有类似的东西 4.之后参照以下网址进行MFC编译 mfc webbrowser控件使用 ...

随机推荐

  1. BootStrap:轮播插件

    前述 利用 BootStrap 实现图片轮播,包括 基本轮播.带标题的轮播.设置轮播速度的轮播.控制前后的轮播 实例 基本轮播 代码 1.引入bootstrap和jQuery文件 <!-- jQ ...

  2. Java进阶篇设计模式之十 ---- 访问者模式和中介者模式

    前言 在上一篇中我们学习了行为型模式的解释器模式(Interpreter Pattern)和迭代器模式(Iterator Pattern).本篇则来学习下行为型模式的两个模式,访问者模式(Visito ...

  3. 使用BeautifulSoup和正则表达式爬取时光网不同地区top100电影并使用Matplotlib对比

    还有一年多就要毕业了,不准备考研的我要着手准备找实习及工作了,所以一直没有更新. 因为Python是自学不久,发现很久不用的话以前学过的很多方法就忘了,今天打算使用简单的BeautifulSoup和一 ...

  4. Linux iptables 配置规则

    Linux iptables 防火墙配置规则 前言:把网上我感觉不错iptables的访问规则都统一在这里,以后做参考. modprobe ipt_MASQUERADE modprobe ip_con ...

  5. 将一个html文件引入另一个html文件的div中

    width="" height=""属性可根据要求自己设定

  6. 2.SDL规范文档

    01.安全设计Checklist 输入验证 校验跨信任边界传递的不可信数据(策略检查数据合法性,含白名单机制等)格式化字符串时,依然要检验用户输入的合法性,避免可造成系统信息泄露或者拒绝服务 禁止向J ...

  7. MySQL读取Binlog日志常见的3种错误

    1. mysqlbinlog: [ERROR] unknown variable 'default-character-set=utf8mb4' 当我们在my.cnf中添加default-charac ...

  8. CTF比赛 十一月场 Look 复现

    拿到题吧,一般的我的操作就是,先看看审核元素有有没有什么东西,然后去御剑扫描,git泄露,备份文件泄露,不行就再去burp抓包看看头部,换方法(post换成get) 发现不明的头部,这种头部的话可能是 ...

  9. 博客系统typecho的安装与使用

    之前用过wordpress和emlog的博客系统,感觉上wordpress功能强大,插件多,而且也不局限博客网站,就是资源占用比较高,emlog比较简单,资源占用少,就是界面不太喜欢,功能相对也少了些 ...

  10. wtf!rds数据同步居然出问题了--菜鸟db的数据修复历程

    由于一次上线操作的数据变更太多,导致执行时间很长! 由于做手动主从关系,所以操作落在了主库上. 由于主从关系不是对整个库的操作,所以在有表新增的地方,添加了dts新的同步关系. db变更完成后,就发布 ...