百度地图与Vue冲突如何解决

bhbhxy · 发表于 2021-9-2 14:41

本帖最后由 bhbhxy 于 2021-9-2 14:42 编辑

先上完整代码：

[HTML] 纯文本查看 复制代码

<!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，则会输出一次，输出一次是正确的，请问这种情况是哪里出了问题？
百度地图提交工单不回复，问客服推诿，只能来这里求助了，求各位大佬指点，感谢~~~

cjx603964937 · 发表于 2021-9-2 15:13

牛的有用感谢

速度富贵浮云 · 发表于 2021-9-2 15:24

你确认一下是不是init方法执行了两次，还是只是onSearchComplete执行了两次

usershare · 发表于 2021-9-2 15:24

单纯解决执行两次问题的话加个flag，判断一下第二次进入直接退出就行。为什么会调用两次，没看过相关源码，推测应该是和生命周期有关

bhbhxy · 发表于 2021-9-2 15:32

速度富贵浮云发表于 2021-9-2 15:24
你确认一下是不是init方法执行了两次，还是只是onSearchComplete执行了两次

把console放在init下只执行一次，所以应该不是init执行了两次

bhbhxy · 发表于 2021-9-2 15:37

usershare 发表于 2021-9-2 15:24
单纯解决执行两次问题的话加个flag，判断一下第二次进入直接退出就行。为什么会调用两次，没看过相关源码， ...

这是一个hack解决方法，但没有从根源上解决这个问题，如果不使用Vue框架就不会出现。所以想了解一下为什么会出现这样的情况。

yuzmb · 发表于 2021-9-2 15:46

仔细看百度地图的文档，第一次还没找到taxiFare的信息，如果有不一样的，就会触发多次

[JavaScript] 纯文本查看 复制代码

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），关键步骤描述了具体驾车行驶方案。

bhbhxy · 发表于 2021-9-2 16:00

yuzmb 发表于 2021-9-2 15:46
仔细看百度地图的文档，第一次还没找到taxiFare的信息，如果有不一样的，就会触发多次
[mw_shl_code=javas ...

文档虽然这么写，但实际百度给开发者提供的只是轻量级接口，也就是始终只返回一条方案，没有多种方案的情况。官网示例代码也证实了这一点。

LeooH · 发表于 2021-9-2 16:02

感谢楼主分享！！！

yuzmb · 发表于 2021-9-2 16:09

bhbhxy 发表于 2021-9-2 16:00
文档虽然这么写，但实际百度给开发者提供的只是轻量级接口，也就是始终只返回一条方案，没有多种方案的情 ...

不是一个方案，看文档。。api

getNumPlans() Number 返回方案个数

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 百度地图与Vue冲突如何解决