vue项目百度地图如何自定义标注marker
更新时间：2024年03月19日 09:57:55 作者：果真zZ
这篇文章主要介绍了vue项目百度地图如何自定义标注marker问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue百度地图自定义标注marker
1、向地图中添加标注
如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：
var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
2、向地图中添加标注
定义标注图标 通过Icon类可实现自定义标注的图标
重点：
vue项目中，以import的方式导入图片文件！！！
如：
import drugMarkerIcon from ‘@/assets/map/drug_mark_icon@2x.png' // 以import的方式导入图片文件
var point = new BMapGL.Point(116.404, 39.915)
var myIcon = new BMapGL.Icon(drugMarkerIcon, new BMapGL.Size(28, 34))
var marker = new BMapGL.Marker(point, { icon: myIcon }) // 创建标注
this.map.addOverlay(marker) // 将标注添加到地图中
marker.addEventListener('click', function () { //监听标注点击事件
alert('您点击了标注')
})vue中Bmap百度地图自定义带标签的图标
效果如图
直接上代码吧
let point = new BMap.Point('经度', '维度')
let mk = new BMap.Marker(point) // 创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false, icon 自定义图标
var label = new BMap.Label(item.address, {
offset: new BMap.Size(0, 25),
});
mk.setLabel(label); // 为marker定义标签
this.map.addOverlay(mk) // 将覆盖物添加到地图中
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
启动项目时遇到ES6的拓展运算符报错可以通过切换到淘宝镜像,以及在项目根目录下新增.babelrc和postcss.config.js文件来解决,这些操作有助于正确配置项目环境,从而避免报错,并保证项目的顺利运行,希望这些经验能够帮助到遇到相同问题的开发者2024-10-10
今天小编就为大家分享一篇vuex actions异步修改状态的实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了使用Vue-axios进行数据交互详情，文章围绕Vue-axios进行数据交互的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习或工作有所帮助2022-03-03
vue组件 keep-alive 和 transition 使用详解
这篇文章主要介绍了vue组件 keep-alive 和 transition 使用详解,需要的朋友可以参考下2019-10-10
vue在取对象长度length时候出现undefined的解决
这篇文章主要介绍了vue在取对象长度length时候出现undefined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家介绍了vue中filter的应用场景，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
前端经常会用到UI提供的各种图表,推荐阿里的图标库,下面这篇文章主要给大家介绍了关于element使用自定义icon图标的详细步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
今天小编就为大家分享一篇vue2.0 + ele的循环表单及验证字段方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vite项目中我们可以手动将src路径设置**@**路径别名,可以省下很多引入路径的冗余路径,下面这篇文章主要给大家介绍了关于Vite配置路径别名的简单实现方法,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue下history模式刷新后404错误解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论