当前位置： 移动技术网 > IT编程>开发语言>JavaScript > uniapp H5端中使用高德API

uniapp H5端中使用高德API

2020年07月14日  | 移动技术网IT编程  | 我要评论

高德的API有现成的SDK支撑安卓/IOS 但是没有专门的API支撑H5（或者说不用专门支撑）

当uniapp中调用高德API的时候就会遇到问题:

因为直接用引入外部js肯定不行了 (uniapp项目中压根就没有 html 页面,这也是我最无语的地方，为这事找了一两天的解决方法)

所以为了解决这个问题就必须引入在线jsAPI

下面就介绍步骤

1.引入在线jsAPI 专门新建个工具类，这样当需要调用地图的时候直接引用该方法就行

a.直接引用js肯定不行，所以采用回调函数的方式引入

b.因为高德的API是异步的，所以我们把他封装成Promise函数

1、封装工具函数

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
		var script = document.createElement('script');
		 script.type = "text/javascript";
		 script.async = true;
		script.src = "https://webapi.amap.com/maps?v=1.4.15&key= 这里是你在高德开发者平台申请的Key值&callback=initAMap";
		script.onerror = reject;
		  document.head.appendChild(script);
    }
    window.initAMap  = () => {
      resolve(window.AMap);
    };
   })
  }

注意：key值换成自己的哈
没有的可以自己去高德开发者平台申请一个，传送门：https://lbs.amap.com

2、引入工具函数
import AMap from "../../tools/utils.js"
3、加载API

高德开放平台文档：https://lbs.amap.com/api/javascript-api

data() {
			return {
				title:'hello',
				provider:'',
				map: null,
				zoom:13,
				resAmap:null,
				scrollH:500,
				scrollW:500,
				initLat:38.913423,//初始维度
				initLng:116.368904,//初始经度
				covers:[],
				LlayAroundGroupOpen:true,  //l网周边
			}
		},

onLoad() {
			this.initAMap()
		},

		methods: {
			async initAMap() {
				try {
					this.resAmap = await AMap();
					this.$nextTick(function() {
						// this.getBroewerLatLng();
						var map = new this.resAmap.Map('map', {
							center: [this.initLng, this.initLat],
							zoom: this.zoom
						});
						this.map = map;
						console.log(this.map)
						this.resAmap.plugin('AMap.Geolocation', () => {
							var geolocation = new this.resAmap.Geolocation({
								enableHighAccuracy: true, //是否使用高精度定位，默认:true
								timeout: 10000, //超过10秒后停止定位，默认：5s
								buttonPosition: 'RB', //定位按钮的停靠位置
								// buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
								zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

							});
							map.addControl(geolocation);
							geolocation.getCurrentPosition(function(status, result) {
								if (status == 'complete') {
									onComplete(result)
								} else {
									onError(result)
								}
							});

						});
						
						//解析定位结果
						var then = this;

						function onComplete(data) {
							console.log(data) // 获取到的定位信息
							then.initLat = data.position.lat;
							then.initLng = data.position.lng;
						}

						function onError(data) {
							console.log(data) // 定位失败的信息
						}

					})
				} catch (e) {
					console.log(e)
				}

			}

		}

最重要的事情是一定要将调用方法放到$nextTick中，因为这样才能保证完全请求完成才调用（具体原因参见Vue）
意思是 在页面加载完之后，再执行 $nextTick 里面的方法;

如有写的不详细的地方，还请各位指出。

本文地址：https://blog.csdn.net/qq_43353619/article/details/107318704

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网