百度地图与Vue冲突如何解决
本帖最后由 bhbhxy 于 2021-9-2 14:42 编辑先上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试代码</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#container {
height: inherit;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="container"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
map: null
},
mounted() {
this.initMap()
},
methods: {
initMap() {
var script = document.createElement('script')
script.src = '//api.map.baidu.com/api?v=3&ak=8BB7F0E5C9C77BD6B9B655DB928B74B6E2D838FD&callback=init'
document.body.appendChild(script)
window.init = this.init
},
//初始化地图
init() {
var map = this.map = new BMap.Map('container', {
minZoom: 5,
maxZoom: 20,
enableMapClick: false
})
map.centerAndZoom('北京', 12)
var start = new BMap.Point(116.310791, 40.003419)
var end = new BMap.Point(116.486419, 39.877282)
//创建驾车规划
var driving = new BMap.DrivingRoute(this.map, {
onSearchComplete: function () {
//问题：这里1会输出两次，而不使用Vue,只会输出一次
console.log(1)
}
})
driving.search(start, end)
}
}
})
</script>
</body>
</html>
问题在console.log(1)这一段，代码是按照百度地图驾车路线规划稍作了修改，现在出现了输出两次1的情况，而如果不使用Vue，则会输出一次，输出一次是正确的，请问这种情况是哪里出了问题？
百度地图提交工单不回复，问客服推诿，只能来这里求助了，求各位大佬指点，感谢~~~
牛的有用 感谢 你确认一下是不是init方法执行了两次，还是只是onSearchComplete执行了两次 单纯解决执行两次问题的话加个flag，判断一下第二次进入直接退出就行。为什么会调用两次，没看过相关源码，推测应该是和生命周期有关 速度富贵浮云 发表于 2021-9-2 15:24
你确认一下是不是init方法执行了两次，还是只是onSearchComplete执行了两次
把console放在init下只执行一次，所以应该不是init执行了两次 usershare 发表于 2021-9-2 15:24
单纯解决执行两次问题的话加个flag，判断一下第二次进入直接退出就行。为什么会调用两次，没看过相关源码， ...
这是一个hack解决方法，但没有从根源上解决这个问题，如果不使用Vue框架就不会出现。所以想了解一下为什么会出现这样的情况。 仔细看百度地图的文档，第一次还没找到taxiFare的信息，如果有不一样的，就会触发多次
var driving = new BMap.DrivingRoute(this.map, {
onSearchComplete: function (results) {
console.log(results.taxiFare)
//问题：这里1会输出两次，而不使用Vue,只会输出一次
// console.log(1)
}
})
百度地图api
驾车导航服务也提供了丰富的数据接口，通过onSearchComplete回调函数可以得到BMap.DrivingRouteResult对象，它包含了驾车导航结果数据信息。 结果会包含若干驾车方案，每条方案中包含了若干驾车线路。 每条驾车线路又会包含一系列的关键步骤（BMap.Step），关键步骤描述了具体驾车行驶方案。 yuzmb 发表于 2021-9-2 15:46
仔细看百度地图的文档，第一次还没找到taxiFare的信息，如果有不一样的，就会触发多次
文档虽然这么写，但实际百度给开发者提供的只是轻量级接口，也就是始终只返回一条方案，没有多种方案的情况。官网示例代码也证实了这一点。 感谢楼主分享！！！ bhbhxy 发表于 2021-9-2 16:00
文档虽然这么写，但实际百度给开发者提供的只是轻量级接口，也就是始终只返回一条方案，没有多种方案的情 ...
不是一个方案，看文档。。api
getNumPlans() Number 返回方案个数
页:
[1]
2