vue html页面script引用高德地图异步问题

最新推荐文章于 2023-07-05 16:49:47 发布

夲木^_^

最新推荐文章于 2023-07-05 16:49:47 发布

阅读量518

点赞数

分类专栏： jS vue

本文链接：https://blog.csdn.net/qq_45950523/article/details/120263008

版权

javascript html5

vue 同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

47 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxx"></script>

在页面script 引入高德api . 如果在api 还没有返回是就去调用。会报错未获取到AMap

所以需要异步处理
在html 页面

  <script>
    (function () {
      var url = `https://webapi.amap.com/maps?v=1.4.15&key=XXXXXX&callback=onmaploaded`;
      var jsapi = document.createElement('script')
      jsapi.charset = 'utf-8'
      jsapi.src = url
      document.head.appendChild(jsapi); // 异步执行问题定位回调函数
    })()
  </script>

上面有在url 后面加了callback 回调 onmaploaded 。这里使用回调函数

let that = this;
window.onmaploaded = () =>{
  console.log('yibu')
  AMap.plugin("AMap.Geolocation", function() { // 22
    let geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认:true
      timeout: 10000 // 超过10秒后停止定位，默认：无穷大
    });
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, "complete", that.onComplete); // 返回定位信息
    AMap.event.addListener(geolocation, "error", that.onComplete); // 返回定位出错信息
  });
}