vue bmap_vue定义map对象

大家好，我是知秋君，一个会写博客吟诗的知秋码农。今天说一说vue bmap_vue定义map对象,希望能够帮助大家进步!!!

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

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

效果图

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

知秋君

相关推荐