Vue快速嵌入百度地图，避坑提效指南

Vue快速嵌入百度地图，避坑提效指南

在Vue项目中引用百度地图并没有高德地图那么方便，但是项目要用，这里分享下找到的方法，方便使用到的时候能快速接入，避雷避坑！

新建bmap.js文件

export default {
    init: function (){
      const AK = "这里是你申请的百度AK";
      const BMap_URL = "https://api.map.baidu.com/api?v=3.0&ak="+ AK +"&s=1&callback=onBMapCallback";
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if(typeof BMap !== "undefined") {
          resolve(BMap);
          return true;
        }
        // 百度地图异步加载回调处理
        window.onBMapCallback = function () {
          resolve(BMap);
        };
        // 插入script脚本
        let scriptNode = document.createElement("script");
        scriptNode.setAttribute("type", "text/javascript");
        scriptNode.setAttribute("src", BMap_URL);
        document.body.appendChild(scriptNode);
      });
    }
  }

在页面引入bmap.js文件

import BMap from "./bmap"

设置容器

<div id="map-container"></div>

/* 这里的高度一定要设置成像素的 百分比会显示不出来 */
#map-container {
width:100%;
height: 520px;
}

地图初始化

在这里设置中心点，相关参数就可以初始化地图了

BMap.init()
.then((BMap) => {
// 创建Map实例
let map = new BMap.Map('map-container')
// 初始化地图,设置中心点坐标和地图级别
var point = new BMap.Point(125.98, 48.68);
// 启用地图惯性拖拽，默认禁用
map.enableContinuousZoom(false)
map.disableDoubleClickZoom(false);
map.disableDragging(false);
map.setViewport(point);    //调整视野
})

相关链接

百度地图开放平台 https://lbsyun.baidu.com/products/map

地图开发者文档 https://lbsyun.baidu.com/index.php?title=jspopularGL
坐标拾取（最好用百度自己的坐标拾取，使用的时候不会出现定位偏差） https://api.map.baidu.com/lbsapi/getpoint/index.html
作者网站地址：https://nanwish.love/