最近在项目中使用了百度地图来显示物流信息，实现方式有两种：
- 引用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); }); }, - 效果图
好啦，通过上面的代码刷新显示地图就解决啦，若大家有更好的方法欢迎分享在下面???，期待中…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/213234.html原文链接：https://javaforall.net
