解决vue中BMap未定义问题

最近在项目中使用了百度地图来显示物流信息，实现方式有两种：

引用Vue Baidu Map
引用BMap

存在的问题：\color{red}{存在的问题：}存在的问题：
1、使用Vue Baidu Map不需要刷新页面即可显示地图，但是不知道如何修改起始点和终点的图标；
2、使用BMap可以修改起始点和终点的图标，但是地图需要刷新页面才会显示。
针对以上两个问题，问题1还未找到解决方案，大家如果有好的解决方案欢迎分享在下面哦。问题2的实现如下所示：

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);
});
},

效果图

好啦，通过上面的代码刷新显示地图就解决啦，若大家有更好的方法欢迎分享在下面???，期待中…

解决vue中BMap未定义问题相关推荐

C#调用百度地图API入门解决BMap未定义问题
本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
解决vue中对象属性改变视图不更新的问题
解决vue中对象属性改变视图不更新的问题参考文章: (1)解决vue中对象属性改变视图不更新的问题 (2)https://www.cnblogs.com/buxiugangzi/p/12050165 ...
vue本地没事放到服务器上无限循环,解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制 ...
解决vue中axios同步的问题
解决vue中axios同步的问题参考文章: (1)解决vue中axios同步的问题 (2)https://www.cnblogs.com/zhupanpan/p/11319305.html 备忘一下 ...
解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template><div class ...
解决vue中无法取得methods方法中的return值
解决vue中无法取得methods方法中的return值参考文章: (1)解决vue中无法取得methods方法中的return值 (2)https://www.cnblogs.com/betty- ...
bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
解决vue中textarea不换行
换行问题: vue 中用 {{}} 进行数据绑定的时候,如果你想让字符串换行是不生效的解决办法:不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 "111 ...

解决vue中BMap未定义问题

解决vue中BMap未定义问题相关推荐

最新文章

热门文章