Vue：如何在地图上添加自定义覆盖物（点）

Aklman 发布于2019-04-23 11:52 / 3358人阅读

摘要：目录如何在地图上添加自定义覆盖物点首发日期如何在地图上添加自定义覆盖物点如何在地图上添加自定义覆盖物点此文重点是在地图上标点，所以就省去引入百度地图的步骤了。这个效果主要是利用百度地图的覆盖物来实现的。

如何在地图上添加自定义覆盖物（点）

首发日期：2019-1-25

如何在地图上添加自定义覆盖物（点）

此文重点是在地图上标点，所以就省去引入百度地图的步骤了。

先给一下最终的效果。

这个效果主要是利用百度地图的“覆盖物”来实现的。
由于我做的这个要求显示不同的颜色来代表不同的所属者，所以就做的麻烦一点。

如果你的需求不要求特别显示，那么可以使用bm-marker

代码大致如下：

上面的代码中position里面的值是经纬度。有了经纬度来能够标上点。
ak是你申请的百度api的key
center是城市中心

如果你希望使用特别的图标来给标上全部点，那么也可以使用bm-marker，它里面有一个icon属性，icon里面的图片可以用来标点：

icon中的url是图片的url路径。

如果你想要显示多种覆盖物，那么你可以使用overlay。（要封装，因为封装之后才能传值进去指定显示什么覆盖物）
简单的overlay是这样子的：

为什么可以基于这个组件来封装是因为这个组件有以下几个好处：

可以定制文本内容
它本身是一个元素，而不是一个图片，（上面的“打点物”都是图片（小红点不确定是不是，可能是一个字体图标的东西）），因为是元素，所以我们能够使用border,background，color等等样式来处理这个元素。

需求实现步骤：
1.定义一个MyOverLay:

2.使用MyOverLay,传给它需要的值：

想了解更多，可以查看Vue百度地图api的官网：https://dafrok.github.io/vue-baidu-map/#/

GPU云服务器云服务器自定义地图 php添加自定义菜单自定义上拉下拉在php自定义函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1266.html

百度地图开发实例番外篇--实用方法（持续更新）

摘要：一前言在使用百度地图开发的过程中，查阅百度地图官网基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。希望百度地图能够越来越强大，这样开发者就可以愉快的开发了一前言在使用百度地图开发的过程中，查阅百度地图官网demo基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。笔者特意把开发过程中遇到的一些疑难杂症和解...

CocoaChina 2019-08-22 13:53 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0