原文链接: 点我
最近在项目中使用了百度地图来显示物流信息,实现方式有两种:
引用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); }); },
好啦,通过上面的代码刷新显示地图就解决啦,若大家有更好的方法欢迎分享在下面👇👇👇,期待中…