1***@qq.com
1***@qq.com
  • 发布:2019-12-10 18:02
  • 更新:2021-04-22 18:07
  • 阅读:4632

在uniapp h5中在线引入高德地图js api的方法分享

分类:uni-app

高德文档:https://lbs.amap.com/api/javascript-api/guide/abc/load
查询了好久都没有找到解决方法,弄好了分享一下.

//这里要加window., loadScrpit的callback才会执行  
window.mapInit = function(){  
  let mapObj = new AMap.Map('iCenter');  
  mapObj.plugin('AMap.Geolocation', function () {  
      let geolocation = new AMap.Geolocation({  
          enableHighAccuracy: false,//是否使用高精度定位,默认:true  
          timeout: 5000,          //超过5秒后停止定位,默认:无穷大  
      });  
      mapObj.addControl(geolocation);  
      geolocation.getCurrentPosition();  
      //返回定位信息  
      AMap.event.addListener(geolocation, 'complete', function (res) {  
          console.log(res);  
      });  
      //返回定位出错信息  
      AMap.event.addListener(geolocation, 'error', function (err) {  
          console.log(err);  
      });  
  });  
}  
// 页面onload调用此方法  
function loadScrpit(){  
  var script = document.createElement('script');  
  script.src = "https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=mapInit";  
  document.body.appendChild(script);  
}
0 关注 分享

要回复文章请先登录注册

1***@163.com

1***@163.com

loadScrpit写在那个页面,我有很多页面要用到,写在首页的话,跳转第二个页面,第二个页面地图显示不出来,每个页面都写一次的话,就会创建多个script
2021-04-22 18:07
1***@qq.com

1***@qq.com (作者)

回复 8***@qq.com :
h5这么使用是可以的,当时是实现了功能的.你看下评论
https://segmentfault.com/a/1190000021249743?_ea=54421496
2020-07-16 11:25
8***@qq.com

8***@qq.com

你好,.vue文件也可以这么引用吗?
2020-07-08 10:15