异步加载Baidu地图失败error isTrusted:true

为什么会加载失败

为了用户体验，在用户使用地址组件之前不加载地图。因此我们采用官网的例子异步加载百度地图，这里做了一点改进：

export function baiduMapInit () {
const url = `https://api.map.baidu.com/api?v=2.0&ak=${BaiduMapAK}&s=1&callback=onBMapCallback`
  return new Promise((resolve, reject) => {
    if (typeof BMap !== 'undefined') {
      resolve()
      return
    }
    window.onBMapCallback = function () {
      resolve()
    }
    let scriptNode = document.createElement('script')
    scriptNode.setAttribute('type', 'text/javascript')
    scriptNode.setAttribute('src', url)
    // scriptNode.setAttribute('crossorigin', 'anonymous')
    document.body.appendChild(scriptNode)
    scriptNode.onerror = (e) => {
      let error = ''
      Object.keys(e).forEach(item => {
        error += item + ': ' + e[item] + '  '
      })
      error += 'errStringify:' + JSON.stringify(e, ['message', 'arguments', 'type', 'name'])
      // eslint-disable-next-line prefer-promise-reject-errors
      reject('地图加载失败：' + error)
    }
  })
}

在pc端调试的时候没有任何问题，但是在移动端真机调试的时候（微信公众号中）一直弹出地图加载失败：弹出的错误信息我在上述代码中打印出来是： isTrusted:true, script:error
google一下发现是跨域的script错误。

解决方法

但是考虑到在pc端运行是正常的，我认为这是微信浏览器搞得鬼。由于测试的域名是http的，所以将百度地图链接换成http的，结果正常运行！

  const url = 'http://api.map.baidu.com/api?v=2.0&ak=' + BaiduMapAK + '&callback=onBMapCallback'