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