vue项目百度地图如何自定义标注marker
发布时间：2024-12-01, 16:24:19 分类：HTML | 编辑 off 网址 | 辅助
图集1/2
正文 1105字数 9,904阅读
1、向地图中添加标注
如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：
如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中Run code
Cut to clipboard
2、向地图中添加标注
定义标注图标 通过Icon类可实现自定义标注的图标
重点：
vue项目中，以import的方式导入图片文件！！！
如：
vue中Bmap百度地图自定义带标签的图标
效果如图
直接上代码吧
定义标注图标 通过Icon类可实现自定义标注的图标
重点：
vue项目中，以import的方式导入图片文件！！！
如：
import drugMarkerIcon from ‘@/assets/map/drug_mark_icon@2x.png' // 以import的方式导入图片文件
Run code
Cut to clipboard
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('您点击了标注')
})Run code
Cut to clipboard
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) // 将覆盖物添加到地图中Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 1 条评论 »
应用插件： vue-baidu-map
功能效果
1.安装vue-baidu-map插件。
2.在main.js中添加代码
import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'udc6OrhXR4BVrdjvVlSxyU2D3Mmd7Y' })3.vue页面
<template> <div> <baidu-map ak="ocjtpCpd3HusX9VUmkfc49P9jxRV5Vch" :scroll-wheel-zoom="true" :center="{ lng: 116.383141, lat: 39.913607 }" :zoom="12" > <!-- :scroll-wheel-zoom="true" //开启滚轮缩放 --> <!--地图视图--> <bm-view class="map"></bm-view> <!--点标注--> <!-- position 标注的位置 --> <!-- dragging 是否启用拖拽 --> <!-- title 鼠标移到marker上显示内容 --> <!-- zIndex设置覆盖物的zIndex --> <!-- icon标注所用的图标对象 --> <!-- dragend 拖拽结束时触发此事件 --> <div v-for="(marker, index) of markers" :key="index"> <bm-marker :position="{ lng: marker.lng, lat: marker.lat }" @mouseover="lookDetail(marker)" @mouseout="infoWindowClose(marker)" :icon="{ url: markerIcon, size: { width: 34, height: 34 } }" :dragging="true" :zIndex="999999999" > <!-- show 是否开启窗体 --> <!-- close窗体被关闭时触发的事件 --> <!-- open窗体被打开时触发的事件 --> <bm-label :content="marker.number" :labelStyle="{ color: 'red', fontSize: '24px' }" :offset="{ width: -35, height: 30 }" /> <bm-info-window :position="{ lng: marker.lng, lat: marker.lat }" :show="marker.showFlag" @close="infoWindowClose(marker)" > <div>电站名称:111</div> <div style="display: flex; flex-wrap: wrap; width: 250px"> <div>充电金额：{{ marker.buildName }}</div> <div>充电金额：{{ marker.buildName }}</div> <div>充电金额：{{ marker.buildName }}</div> <div>充电金额：{{ marker.buildName }}</div> <div>充电金额：{{ marker.buildName }}</div> </div> </bm-info-window> </bm-marker> </div> <!--比例尺控件--> <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> <!--缩放控件--> <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation> </baidu-map> </div> </template> <script> import BmView from 'vue-baidu-map/components/map/MapView' //地图视图 import BmMarker from 'vue-baidu-map/components/overlays/Marker' //点标注 import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow' //标注弹窗 import BmScale from 'vue-baidu-map/components/controls/Scale' import BmNavigation from 'vue-baidu-map/components/controls/Navigation' export default { components: { BmView, BmMarker, BmInfoWindow, BmScale, BmNavigation, }, data() { return { // 地图标记点 markers: [ { lng: '116.383141', lat: '39.913607', name: '信息窗口1', showFlag: false, number: '1', buildName: '胡歌', }, { lng: '116.383141', lat: '39.900000', name: '信息窗口2', showFlag: false, number: '20', buildName: '花花', }, ], markerIcon: 'http://api0.map.bdimg.com/images/marker_red_sprite.png', //标注图片 } }, methods: { infoWindowClose(marker) { //弹框关闭 marker.showFlag = false }, lookDetail(marker) { marker.showFlag = true }, }, } </script> <style lang="less" scoped> .map { width: 100%; height: 500px; } </style>