【baidu-map】 vue百度地图插件使用——添加坐标标识_vue-baidu-map通过鼠标点击标记点

 html

<baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler">
 
    <!-- 标记 -->
    <bm-marker v-for="marker of markers" :icon="{ url: mapIcon, size: { width: 52, height: 52 } }" :position="{ lng: marker.lng, lat: marker.lat }" @click="lookDetail(marker)">
 
        <!-- 信息弹窗 -->
        <bm-info-window 
            :title="infoWindow.info.name" 
            :position="{ lng: infoWindow.info.lng, lat: infoWindow.info.lat }" 
            :show="marker.showFlag" 
            @close="infoWindowClose(marker)" 
            @open="infoWindowOpen(marker)">
        </bm-info-window>
    </bm-marker>
    
</baidu-map>

JavaScript

<script>
import { BaiduMap } from 'vue-baidu-map'
// 自定义图标引入
import mapIconPath from "../../../assets/images/mapIcon.png"
 
export default {
    components: {
        BaiduMap
    },
    data() {
        return {
            // 地图
            BMap: null,
            ak: '申请的百度地图key',
            // 地图中心点坐标
            center: { lng: 0, lat: 0 },
            // 地图缩放级别
            zoom: 16,
            // 自定义标记图标
            mapIcon: mapIconPath,
            // 存放标记的数组
            markers: [],
            // 信息窗口
            infoWindow: {
                info: {}
            },
        }
    },
    methods: {
        /** 获取地图 —— 用于初始化地图 */
        handler({ BMap, map }) {
            console.log(BMap, map)
            this.BMap = BMap;
            this.map = map; 
            this.center.lng = 113.30552997040922
            this.center.lat = 22.807159275942844
            this.zoom = 17
            
            // 添加一个标记
            this.markers.push({ 
                lng: 113.30552997040922,
                lat: 22.807159275942844,
                name: "地址信息",
                showFlag: false
            })
        },
 
        // 点击点坐标赋值
        lookDetail(marker) {
            marker.showFlag = true;
            this.infoWindow.info = marker;
        },
 
        // 关闭弹窗
        infoWindowClose(marker) {
            marker.showFlag = false
        },
        // 打开弹窗
        infoWindowOpen(marker) {
            marker.showFlag = true
        },
    }
}

 css 一定要给baidu-map宽度高度，不然不显示

注：本篇主要讲【baidu-map】的标记【bm-marker】和信息弹窗【bm-info-window】，关于【baidu-map】标签可以点击这里查看

bm-marker 标记

1. v-for="marker of markers" 

   （markers 为存放标记的数组）

2. position

   包含lng、lat，用于标记的显示位置

3. icon

   url为图片路径，size为图片大小(可写可不写，写则为自定义，不写是百度自带的默认icon）

   @ lookDetail 方法

        点击该标记时将标记marker信息赋值给信息窗口，并显示该信息窗口

bm-info-window 信息窗口

1. title

   窗口信息内容，一般与对应标记的name内容一致

2. position

   窗口信息位置，一般与对应标记的位置一致

3. show

   窗口信息是否显示，一般与对应标记的showFlag一致

@close="infoWindowClose(marker)

关闭信息窗口

@open="infoWindowOpen(marker)

打开信息窗口

效果图