百度地图API二次开发小经验分享
最近在做一个物流后台系统,需要用地图来把订单地址展示出来,需要在地图上批量框选坐标进行排单,需要看到配送员的实时位置等等功能。
在高德地图、腾讯地图、百度地图三者间,我选了百度地图,没有原因,个人偏好,因此我也不知道高德地图和腾讯地图好不好用。反正到目前为止,我所想到的功能,百度都有对应的接口提供,点个赞。
一、关于百度地图的JavaScript API
在网站上通过js直接来调用百度的api,使用方法很简单,可以参考官网:http://developer.baidu.com/map/index.php?title=jspopular。
开发初期给我帮助比较大的是直接拷贝demo示例提供的代码:http://developer.baidu.com/map/jsdemo.htm#a1_2(我用360浏览器显示不正常,建议使用chrome)
当然,demo展示的功能不是全部的功能,大概有80%吧,想灵活的使用各种方法,有事没事得把js API的类参考文档看一下,大概有什么类,有什么方法。参考地址:http://developer.baidu.com/map/reference/index.php
这里推荐个有个比较隐蔽的js文档网址:http://developer.baidu.com/map/library.htm。这里有一些功能的补充,都是一些比较高级的功能,在开发的中后期都是参考这个网址来进行开发。
二、关于百度地图的Web API
web端的接口就相对少一些,我使用PHPExcel来导入订单信息,然后使用Web API对地址信息进行转换,最后把地址的相关信息保存到数据库当中。例如:导入地址:广州市天河北嘉逸国际酒店五楼力美健。通过Web API的Geocoding API可以获取到经度:113.315296,纬度:23.138987,所在区:越秀区,所在路:梅花路。
获取到地址的详细信息后,就在排单页面上以坐标的形式标记出来,这里就和JavaScript API结合使用了。
三、功能示例展示
我就通过参考上述的各种文档,东借西凑做出一些小功能,现在展示给大家看看。
1.以热力图的方式直观展示订单的密集程度以及区域订单数量。
左上角的工具条是绘制覆盖物的工具条,在地图上划一个区域,然后结合百度提供的几何换算的API,可以把绘制区内的订单搜集起来(我所做的是将区域内的订单移出地图,并放在“购物车”内),效果如下图:
2.实时位置展示
这是一个在不停上下跳动的坐标点,旁边是label信息(当然可以做得美一些)。这里可以参考百度地图提供的鹰眼服务。参考网址:http://yingyan.baidu.com/index.html
四、注意事项
1.样式问题。如果是使用BootStrap做的前端,那么css文件:bootstrap.css或bootstrap.min.css中的label将会和百度地图的地图样式有冲突,导致百度地图的label样式失效。
解决方法如下图所示:移除bootstrap.css文件中label的max-width样式。
2.定位问题。一般来说,通过PC端浏览器对个人目前位置定位是不准确的,强烈建议使用移动端来测试定位的代码。
3.地址解析问题。偶尔会遇到地址解析不了的问题,那很可能就是你没有填写所要解析地址所在的城市。如果业务需求不同的城市进行地址的解析,那么可以通过session、查询数据库等方式来实时获取用户所在的城市。这个参数虽然不显眼,但是千万不能忽略,不然会出现各种意想不到的精彩事情。如下图所示:
五、小结
总的来说,百度地图还是挺好用的,而且开发难度不算大,再点个赞。
大家如果也在进行地图方面的开发,可以互相交流经验,同时也欢迎大家多多指教!
转载于:https://www.cnblogs.com/yiyiBlog/p/5122224.html
百度地图API二次开发小经验分享相关推荐
- 转载 百度地图API二次开发小经验分享
转载From:http://www.cnblogs.com/yiyiBlog/p/5122224.html 最近在做一个物流后台系统,需要用地图来把订单地址展示出来,需要在地图上批量框选坐标进行排单, ...
- html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版 简介 JavaScript API大众版 JavaScript API功能介绍 百度地图Jav ...
- 运用百度地图API离线版(在线版)实现网管系统中终端定位和终端信息获取的功能...
一.了解百度地图API 1.百度地图JavaScript API简介 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可在网站中构建功能丰富.交互性强的地图应用 ...
- 百度地图api离线开发(示例源代码)
相关教程: 1.如何搭建WEB离线地图开发环境 2.下载离线地图数据(金字塔瓦片数据) 3.离线地图二次开发接口(离 ...
- php百度地图接口两点测距,百度地图Api 根据两个坐标点计算距离
百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...
- centerandzoom 无效_Django调用百度地图api在地图上批量增加标记点
在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区.根据需求坐标在地图上添加若干个标记点,并批量的为各个标记点设置 ...
- 【百度地图api】前端 百度地图添加地理围栏
需求:添加教练场区域,在百度地图上选择多边形电子围栏,保存坐标: 主要参考百度地图api: 遇到的小坑:注意绘制百度地图多边形时,传入的坐标数组的结构!!! 相对来说比较简单,百度api已经很详细了. ...
- 微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- api 定位 微信小程序 精度_微信小程序城市定位(借助百度地图API判断城市)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
最新文章
- 从入门到放弃的javaScrip——队列
- matplotlib01-plot折线图、scatter散点图
- 理解深度学习中的学习率及多种选择策略
- python b64 图片处理
- RAC分解步骤之一,在oracle linux 4u4上安装oracle 10.2.0.1.0操作日志
- 1001: [BeiJing2006]狼抓兔子
- RaDirect交换器-搭建环境
- 在Java中使用Collat​​or和String类进行字符串比较
- 分析udp数据报_开发需知!!!TCP和UDP的特点和区别
- CToolBarCtrl工具栏设置总结(转)
- OPENSSH升级为7.4
- K-均值聚类算法通俗讲解
- 求职面试-HR会问你什么问题?
- 可视化工具netron的使用
- 8.称呼/no/not/meet/nice/of/倒装句/介绍他人的方式/see
- OpenGLES2.0渲图步骤:绘几何图形、图片处理、离屏渲染(3)
- [JZOJ3385] [NOIP2013模拟] 黑魔法师之门 解题报告(并查集)
- 23考研| 你来了,准硕士!!!
- 笔记本处理器排名_Intel十代处理器笔记本电脑排行榜 (附带推荐机型信息20191021)...
- Js判断是否为非数字
热门文章
- 爬虫 | 正则表达式提取腾讯教育新闻链接及图片链接
- powerdesigner箭头如何画_用Scratch编程画几何图形:如何画多边形
- 没有匹配 if 的非法 else_求求你,别再写这么多if...else...了
- oracle之分析函数 开窗函数,Oracle之分析函数、开窗函数
- 在三角形中rt是什么意思_数学中RT三角形是什么意思
- 中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
- python矩阵reshape_[LeetCode Python3]566. Reshape the Matrix(重塑矩阵)
- c语言中成绩等级流程图画法,大家帮我看看这个程序的流程图怎么画,谢了
- Opencv开闭运算去除反光噪声
- scrapy 怎么添加cookie_scrapy学习之爬虫练习平台5