百度地图加载空白颜色_本地地图批量标点的html实现
地图批量标点的实现方法有很多,也有很多网站支持直接Excel上传数据进行标点的。比如地图无忧等。但都是软收费的模式(要么有使用期限,要么有数量限制),后来在查找资料的过程中,发现了一个在本地可以实现地图标点的方式。其实现步骤如下。
样例介绍
本地地图批量标点是基于百度地图中的“加载海量点”样例的。样例地址是:http://lbsyun.baidu.com/jsdemo.htm#c1_19,其网站样例如图1-1所示。
图1- 1
本次目标的实现就是基于此样例来实现。
创建本地文件
在百度样例中,选中全部样例代码,复制,然后再本地创建一个空白的html文件,并将其粘贴进去,保存(我个人使用的是notepad++)。此时保存好的文件如图1-2所示。
图1- 2
修改页面代码并放入数据
(1)首先需要修改的就是要将百度地图的引入api地址补充完整。样例中的地址如图1-3所示。
图1- 3
这里需要在src属性里面增加“http”,不然后面出不来图。同时也要将自己的百度地图ak填写到对应的位置。
(2)其次是要设置中心点坐标和地图级别,对应的样例中的代码位置如图1-4所示。
图1- 4
Bmap.Point()里面的参数是GPS坐标,map.centerAndZoom()的第二个参数就是地图级别,可以根据自己的需求设置。数值设置越大显示的越详细。
(3)再次是要将需要标点的数据加入到样例中,位置如图1-5所示。
图1- 5
这里呢,需要将数据整理成key-value格式,然后放入到points中。整理好得数据如图1-6所示。
图1- 6
(4)调整监听事件。这个作用就是如果需要了解标点的信息,那么鼠标点击对应的点,就会显示出来详细信息。样例中的位置如图1-7所示。
图1- 7
调整信息可以根据上面points里面的信息进行调整,可以选择哪些显示,哪些隐藏。调整之后的监听事件样例代码如图1-8所示。
图1- 8
(5)上述操作完成之后保存一下,然后使用浏览器打开,显示如图1-9所示。
图1- 9
其中红框内的是刚才points里面加入的三个点,中心位置就是步骤(2)里面设置的位置。然后可以使用鼠标滚轮进行放大或者缩小,可以使用鼠标左键点击已经标注的点,点击之后效果如图1-10所示。
图1- 10
至此,本地地图标点的目标通过html的方式,一个文件就可以实现了。
后续
上述功能实现之后,后面可以根据官方文档提供的功能进行细化调节,比如说点的形状、大小、颜色,地图的样式等等。
未经授权,禁止转载!
详情可关注公众号“Hill的数据分析成长之路"
百度地图加载空白颜色_本地地图批量标点的html实现相关推荐
- 百度地图加载空白颜色_本地地图标点的html实现
地图批量标点的实现方法有很多,也有很多网站支持直接Excel上传数据进行标点的.比如地图无忧等.但都是软收费的模式(要么有使用期限,要么有数量限制),后来在查找资料的过程中,发现了一个在本地可以实现地 ...
- 百度地图加载空白颜色_详细解析百度收录和百度排名关系
虽然很多人说收录和排名没有很大的关系,包括百度官方也是这样说的,但总而言之,要想排名,必须要先收录,所以百度收录和百度排名是有直接关系,并且关系还不小,那么今天我来教大家用几个小方法,可以解决网站快速 ...
- cesium加载百度地图_Cesium专栏-百度地图加载(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- 百度地图加载不出来,问题根源在SHA1
最近做的项目用到了百度地图,结果开发过程中一切正常,但是最后打包的程序的地图却加载不出来,尝试了好多办法,最后还是没有成功.最后找出来问题的根源,都是SHA1惹的货. 首先获取SHA1,这里推荐两种办 ...
- 华为手机android7.0应用中百度地图加载不出来解析包时出现问题
第一次写博客,写的不好请各路大神多多海涵. 之前写的app在华为手机上出现了问题,android版本是7.0.据统计,android7.0和7.1的市场份额分别是:安卓7.0的份额为0.5%,安卓7. ...
- 修复el-amap高德地图加载空白的bug
le-amap 地图加载经常出现 白底无法加载的情况 created(){this.clearMapstore()},clearMapstore(){localStorage.removeItem(' ...
- 使用奥维地图加载星图地球数据云地图数据
星图地球数据云是国内继天地图,谷歌地球之后,星图地球数据云(Datacloud)是国内又一大基础地图数据服务平台 本文介绍使用奥维互动地图加载Datacloud地图数据 1.友情提示 奥维地图暂不支持 ...
- android 打包hbuilder 高德地图加载不出来_十一黄金周地图很忙:百度获央视报道,高德忙道歉,究竟谁好用?...
现代人出门,地图几乎成了必备的工具,开车步行规划路线,搜周边的美食旅游景点等.每年的十一黄金周,是出门旅游的高峰期,今年的十一又很特别,中秋跟国庆同一天,8天的假期美滋滋. 十一虽然已经过去了几天,但 ...
- 小程序水印照片canvas绘制网络图和本地图加载空白的解决方案
功德+1 功德+1 功德+1 效果图 遇到问题 在图片onload中,绘制水印,水印含网络图logo和本地图的图片.在使用**wx.canvasToTempFilePath()**生成图片时,logo ...
最新文章
- flash wmode参数详解
- php kafka 日志系统,kafka-PHP客户端库(Composer)
- 用Jquery控制文本框只能输入数字和字母及jquery自定义方法$.fn
- 【学习笔记】cookie、session、token和分布式session
- OCJP认证考试复习课-张晨光-专题视频课程
- iOS开发之FMDB
- POJ 3683 Priest John's Busiest Day(2-ST)
- 每日小记2017.2.28
- [股市]跳搂指数(收藏)
- ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源, 或者超时失效---解决方法
- 主题模型TopicModel:PLSA模型及PLSA的EM推导
- Netkeeper-OpenWrt——使用 GitHub Actions 云编译 带有 闪讯拨号插件(Netkeeper)的OpenWrt编译项目
- Flutter技术在会展云中大显身手
- 给大家分享学好 Python 的 11 个优秀资源
- TSL协议及抓包分析
- 什么是做空? 什么是做空和做多离岸人民币?
- valid/ready握手协议之ready打拍
- 深入掌握JMS(一):JSM基础
- 第12集 关于库卡机器人对需要减速和插值方式说明
- Unity3D技巧之小地图的实现
热门文章
- 计算机科学专业GRE写作4,想申请Top30,GRE写作成绩到底多少分才够?
- UIBezierPath设置图片圆角
- java 云笔记 总结_「370027」有道云笔记的java后台开发部分笔记整理归纳 - seo实验室...
- java 下mp3 转 pcm、wav
- python云服务器搭建教程_Python利用flask搭建一个共享服务器的步骤
- 使用udig配置数据样式(二)——udig加载数据
- Android 仿QQ未读消息拖拽删除粘性控件效果
- 微信游戏礼包怎么更改服务器,微信活动奖励兑换使用说明
- compilation terminated.
- 选择题考试系统html页面,网页设计考试复习测试试题