vue中引入百度地图

$ npm install vue-baidu-map --save

在main.js 中引入

import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  ak: 'xxxxxxxxxxxxxxxxxxxxxxx'//这里是你申请的key
})

然后在页面中插入，摆到你要的位置

<baidu-map :center="center1" :zoom="zoom1" class="bm-view" id="bm-view" style="100%; height: 300px;margin-top:30px;"></baidu-map>

在生命周期里调用

mounted() {
        
            var map = new BMap.Map("bm-view"); //new 一个地图对象，绑到id为bm-view上
            var point = new BMap.Point(109.00373, 34.46383); //设置地图的中心点
            var zoom = 20; //设置地图的等级
            map.centerAndZoom(point, zoom); // 在地图中显示
            map.enableScrollWheelZoom(); //启用滚轮放大缩小
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
            var geoc = new BMap.Geocoder();
            //给地图添加点击事件
            map.clearOverlays();
            //创建标注位置
            var pt = new BMap.Point(109.0039,34.46383);
            var myIcon = new BMap.Icon(
                require("../assets/main/biao.png"),
                new BMap.Size(100, 100)
            );
            let maptitle = `<span>标题</span>`;
            var opts = {
                width: 0, // 信息窗口宽度
                height: 0, // 信息窗口高度
                title: maptitle // 信息窗口标题
            };
            var marker2 = new BMap.Marker(pt, {
                icon: myIcon
            }); // 创建标注
            map.addOverlay(marker2); // 将标注添加到地图中
            var infoWindow = new BMap.InfoWindow("SOTOCooffee", opts); // 创建信息窗口对象
            marker2.addEventListener("click", function() {
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            });
        }