vue-baidu-map 使用

1.安装地图

npm install vue-baidu-map

2.在main中引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{ak:'此处粘贴你的百度地图ak'})

3.简单使用百度地图

<baidu-map class="map" :scroll-wheel-zoom="true" :zoom="15" @ready="mapReady"></baidu-map>



 mapReady({ BMap, map }) {
            // 选择一个经纬度作为中心点
            this.point = new BMap.Point(this.point.longitude, this.point.latitude);

            map.centerAndZoom(this.point, 12);
            //把标注添加到地图上
            let marker = new BMap.Marker(this.point);

            map.addOverlay(marker);

            //把信息添加到地图上
            map.addOverlay(marker);
            let content = '<table>';
            content = content + '<tr><td> 任务：技术服务</td></tr>';
            content = content + '<tr><td> 地点：广东省广州市海珠区科韵南路</td></tr>';
            content = content + '<tr><td> 时间：2021-07-15</td></tr>';
            content += '</table>';

            let infowindow = new BMap.InfoWindow(content);
            marker.openInfoWindow(infowindow);
        },