uniapp H5端中使用高德API

最新推荐文章于 2025-06-09 12:17:27 发布

编程小橘子

最新推荐文章于 2025-06-09 12:17:27 发布

阅读量5.6k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_43353619/article/details/107318704

uniapp 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在uniapp项目中使用高德地图API，通过引入在线jsAPI并封装为Promise函数，实现地图功能的调用。文章详细说明了创建工具类、加载API及定位操作的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高德的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)
				}

			}

		}