最近做了一个百度地图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. Caffe源码理解1:Blob存储结构与设计

    博客:blog.shinelee.me | 博客园 | CSDN Blob作用 据Caffe官方描述: A Blob is a wrapper over the actual data being p ...

  2. SignalR第一节-在5分钟内完成通信连接和消息发送

    前言 首先声明,这又是一个小白从入门到进阶系列. SignalR 这个项目我关注了很长时间,中间好像还看到过微软即将放弃该项目的消息,然后我也就没有持续关注了,目前的我项目中使用的是自己搭建的 Web ...

  3. 前端笔记之CSS(下)浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

  4. 一起学Android之Http访问

    概述 在Android开发中,一般通过网络进行访问服务器端的信息(存储和检索网络中的数据),如API接口,WebService,网络图片等.今天主要讲解Http访问的常用方法,仅供学习分享使用. 涉及 ...

  5. dagger2的初次使用

    一.使用前准备 1.打开app的build.gradle文件: 顶部停用apt插件: //添加如下代码,应用apt插件 apply plugin: 'com.neenbedankt.android-a ...

  6. Linux stat函数和stat命令

    stat函数和stat命令 linux文件里的[inode = index node]解释:要理解inode必须了解磁盘和[目录项],inode实际是连接[目录项]和磁盘的中间物质. 图里的大圈代表硬 ...

  7. C++基础——类封装简单示例

    一.前言 在IC前端设计/验证领域,只会HDL远远不够.目前大多数项目使用已开发好的系统架构和IP Core,因此设计部分的工作量慢慢向系统集成和验证方向转移.而在集成和验证过程中,往往以各种脚本和面 ...

  8. LeetCode算法题-Letter Case Permutation(Java实现)

    这是悦乐书的第315次更新,第336篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第184题(顺位题号是784).给定一个字符串S,将每个字母单独转换为小写或大写以创建另 ...

  9. eggjs 框架代理调试 SELF_SIGNED_CERT_IN_CHAIN 报错解决方案

    eggjs 中的 this.ctx.curl 可以发起一个请求,配置 proxy 可以很方面的通过接口进行问题定位.代理方式如下: 1.开启 egg-development-proxyagent ,配 ...

  10. webpack打包The 'mode' option has not been set,错误提示

    学习到webpack打包这个工具的时候,总是报错.在这里记录一下...... 我是window系统 当使用npm安装好webpack后,你去查看如果出现一下问题. 出现以上问题,我的做法是 先将web ...