首先你要去高德地图官网申请web端key

高德官网：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

1、基本使用

会提示你先引入下边这块代码

一、<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

uniapp项目在引入的时候会报错所以直接拿 https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值 这个链接去访问然后保存到本地再引进来就行了

import map from '../../static/maps.js' 

二、定义一个地图容器

<view id="container"></view>

//设置容器宽高
#container {
	width: 750rpx;
	height: 850rpx;
}

三、初始化地图就行了

data(){
	return{
		map:'',
	}
}

onLond(){
		this.$nextTick(() => {
			let _this = this;
			_this.map = new AMap.Map('container', {
				zoom: 15, //缩放级别
				resizeEnable: true, //自动定位
			});
		})
}

初始化完成如下图

自定义点标记，信息窗体的内容，点标记点击事件

					let content = `<div>
									<div style="font-size: 14px;font-weight: bold;line-height: 42px;">福建省泉州市安溪茶园35号地块</div>
									<div style="font-size: 12px;font-weight: bold;line-height: 36rpx;color: #666666;">本基地专注于培育天然无污染茶叶</div>						
									<div style="width:260px;height:0px">									
									</div>									
									<button style="width:100px;height:25px;border:1px solid #333333;background-color:transparent;margin-top:5px;border-radius: 15px;" onclick="opendata()">前往该地</button>
									</div>`;
																					
				     var infoWindow = new AMap.InfoWindow({ //创建信息窗体
				        isCustom: false,  //使用自定义窗体
				        content:content, //信息窗体的内容可以是任意html片段
				        offset: new AMap.Pixel(16, -45)
				    });
					var onMarkerClick  =  function(e) {
				        infoWindow.open(_this.map, e.target.getPosition());//打开信息窗体
				        //e.target就是被点击的Marker
				    }
				    
					var icon = new AMap.Icon({
					    size: new AMap.Size(100, 100),    // 图标尺寸
					    image: '../../static/images/icon/地图.png',  // 自定义Icon的图像
					    imageSize: new AMap.Size(50, 50)   // 根据所设置的大小拉伸或压缩图片
					});
					
					var marker = new AMap.Marker({
				       position:[116.39, 39.9],//位置
					   icon: icon, // 添加 Icon 图标 URL
				   })
				   
				_this.map.add(marker);//点标记添加到地图
				marker.on('click',onMarkerClick);//点标记绑定click事件

效果图：

完整js代码就是下面这样`

mounted() {
			this.$nextTick(() => {
				let _this = this;
				_this.map = new AMap.Map('container', {
					zoom: 17, //缩放级别
					// resizeEnable: true, //自动定位
					 center: [116.39, 39.9],
					// key: 'c1b2d834cfd6150c716571276aadc1ff'
				});
				
					// 信息窗体的内容
					let content = `<div>
									<div style="font-size: 14px;font-weight: bold;line-height: 42px;">福建省泉州市安溪茶园35号地块</div>
									<div style="font-size: 12px;font-weight: bold;line-height: 36rpx;color: #666666;">本基地专注于培育天然无污染茶叶</div>						
									<div style="width:260px;height:0px">									
									</div>									
									<button style="width:100px;height:25px;border:1px solid #333333;background-color:transparent;margin-top:5px;border-radius: 15px;" onclick="opendata()">前往该地</button>
									</div>`;												
				     var infoWindow = new AMap.InfoWindow({ //创建信息窗体
				        isCustom: false,  //使用自定义窗体
				        content:content, //信息窗体的内容可以是任意html片段
				        offset: new AMap.Pixel(16, -45)
				    });
					
				    var onMarkerClick  =  function(e) {
				        infoWindow.open(_this.map, e.target.getPosition());//打开信息窗体
				        //e.target就是被点击的Marker
				    }
					var icon = new AMap.Icon({
					    size: new AMap.Size(100, 100),    // 图标尺寸
					    image: '../../static/images/icon/地图.png',  // Icon的图像
					    imageSize: new AMap.Size(50, 50)   // 根据所设置的大小拉伸或压缩图片
					});
					var marker = new AMap.Marker({
				       position:[116.39, 39.9],//位置
					   icon: icon, // 添加 Icon 图标 URL
				   })
				_this.map.add(marker);//点标记添加到地图
				marker.on('click',onMarkerClick);//绑定click事件
			})
			
	
		},