标签：async default ack ISE png app next his 密钥
原文链接： 点我
最近在项目中使用了百度地图来显示物流信息，实现方式有两种：
引用Vue Baidu Map
引用BMap
存在的问题：\color{red}{存在的问题：}存在的问题：；
使用BMap可以修改起始点和终点的图标，但是地图需要刷新页面才会显示。
针对以上问题，问题的实现如下所示：
Vue文件中的代码
<template>
<div id="myMap"></div>
</template>
import qs from "qs";
export default {
mounted() {
this.getMap();
},
methods: {
// 绘制地图
getMap() {
var map = new BMap.Map("myMap");
map.enableScrollWheelZoom(true);
//注意：下面的坐标值换为自己的动态值即可，我就不多说了
var start = new BMap.Point(this.startLng, this.startLat);
var end = new BMap.Point(this.currentLng, this.currentLat);
var p1 = new BMap.Point(this.currentLng, this.currentLat);
//自定义图标
var startIcon = new BMap.Icon(
require("../../assets/images/point.png"), //起点图片
new BMap.Size(25, 25)
);
var currentIcon = new BMap.Icon(
require("../../assets/images/car.png"), //物流车图片
new BMap.Size(25, 25)
);
var endIcon = new BMap.Icon(
require("../../assets/images/point.png"), //终点图片
new BMap.Size(25, 25)
);
var driving = new BMap.DrivingRoute(map, {
renderOptions: { map: map, autoViewport: true },
onMarkersSet: function(routes) {
//标注点完成回调
map.clearOverlays(); //删除点
var myStart = new BMap.Marker(start, { icon: startIcon });
map.addOverlay(myStart);
var myEnd = new BMap.Marker(end, { icon: endIcon });
map.addOverlay(myEnd);
var myP1 = new BMap.Marker(p1, { icon: currentIcon });
map.addOverlay(myP1);
}
});
driving.search(start, end, { waypoints: [p1] });
},
};
</script>
这样写之后浏览器会报BMap is undefined,解决方法如下：
在项目根目录下建立Js文件（比如：map.js）
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
在App.vue中
<script>
import { MP } from ‘./map‘ //引入上面创建的map.js文件
export default {
name: ‘app‘,
data(){
return {
ak: "这里是您的密钥",
}
},
async mounted(){
await MP(this.ak);
}
}
</script>
要使用的vue文件中
mounted() {
// 解决BMap undefined
this.$nextTick(() => {
var timer = setTimeout(() => {
this.getMap();
}, 500);
});
},
好啦，通过上面的代码刷新显示地图就解决啦，若大家有更好的方法欢迎分享在下面??????，期待中…
标签：async default ack ISE png app next his 密钥
原文地址：https://www.cnblogs.com/myfate/p/11676900.html
