uniapp有自带的map组件

map-

uni-app官网

map组件兼容了大多数的凭条，但是注意 - map只是展示与定位不一样，定位uniapp有自己的api

在注意事项中，uniapp官网提到了

 <map> 组件在不同平台的底层引擎是不同的：微信小程序为腾讯地图；H5为腾讯地图或谷歌地图；App、支付宝小程序为高德地图；百度小程序、快应用为百度地图。app-vue也可以使用百度地图，在manifest中配置，打包后生效，但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要，建议使用高德地图

因此，在H5中的地图并不能使用高德地图

H5中使用高德地图

(1)利用最简单的加载script标签进行引入高德地图js

onload() {
    let that = this;
    this.$nextTick(()=>{
	var script = document.getElementById('mapTest')
	let that = this;
	script ? this.loop() : (function (){
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.setAttribute('id', 'mapTest')
	script.src = `https://webapi.amap.com/maps?v=2.0&key=${Config.AMapKeyN}&plugin=AMap.MarkerCluster`;
	document.body.appendChild(script);
	that.loop();
	})()
  })
}

（2）引入地图后进行创建使用

           loop() {
				try{
					this.initMap();
				}catch(e){
					setTimeout(()=>this.loop(), 200)
				}
			},
			
			initMap() {
				this.map = new AMap.Map("map", {
					center: ['106.55', '29.57'],
					zoom: 16,
					rotateEnable: false,
					touchZoom: false,
					dragEnable: false,
				});
			},

其实只要引入了高德地图的api,之后的功能都很好做了

查看uniapp的其他功能

uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp功能