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) // 将覆盖物添加到地图中
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vuex的属性和作用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
本篇文章主要介绍了vue之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
vue elementUI Plus实现拖拽流程图的详细代码(不引入插件)
文章介绍了如何使用Vue和elementUI Plus实现一个简单的拖拽流程图功能,不引入任何插件,完全手写,设计思路,感兴趣的朋友跟随小编一起看看吧2025-01-01
TinyMCE 是一款功能强大的富文本编辑器,广泛应用于各种 Web 应用中,本文将详细介绍如何在 Vue 项目中集成 TinyMCE,通过详尽的步骤说明、示例代码展示以及丰富的配置选项,助力开发者轻松实现内容编辑的增强与美化,需要的朋友可以参考下2024-11-11
下面小编就为大家分享一篇C#实现将一个字符转换为整数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了vue实现可改变购物数量的购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
本篇文章主要介绍了vue.js组件之间传递数据的方法，组件实例的作用域是相互独立的，如何传递数据也成了组件的重要知识点之一，有兴趣的可以了解一下2017-07-07
本文主要介绍了Vuex模块化实现待办事项的状态管理的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
vue3 vue-draggable-next如何实现拖拽穿梭框效果
这篇文章主要介绍了vue3 vue-draggable-next如何实现拖拽穿梭框效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
vue+elementui实现动态添加行/可编辑的table
这篇文章主要为大家详细介绍了vue+elementui实现动态添加行/可编辑的table，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论