高德地图添加多个标注的

引入高德地图api

 <script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "xxxx", //高德地图秘钥
  };
</script>

<script src="https://webapi.amap.com/loader.js"></script>

配置地图

<script type="text/javascript">
 AMapLoader.load({
    key: "xxxx", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  }).then((AMap) => {
      const map = new AMap.Map("container",{
		  zoom:8, //地图级别
          center: [108.27331,22.78121],  //地图中心
		  });	
			var markers = [  // 标注数组
			   {
				   coordinate:[108.30, 22.75],
				   img:'images/shdz.png',		   
			   },		   
			     {
				   coordinate:[108.881058, 22.875931],
				   img:'images/shdz.png',
			   },
			    {
				   coordinate:[108.8103, 23.21768],
				   img:'images/shdz.png',
			   },
			   {
				   coordinate:[109.22238,23.7521],
				   img:'images/shdz.png',			   
			   }					
			];		
			for (var i = 0; i < markers.length; i++) {
				var marker = new AMap.Marker({
					position: markers[i].coordinate,
				    icon:new AMap.Icon({            
			          image:markers[i].img,
			          size: new AMap.Size(60, 60),  //图标所处区域大小
			          imageSize: new AMap.Size(60,60) //图标大小
		              }),       
		            offset: new AMap.Pixel(-30, -60), 
				    map: map					
				});
			}
       polyline.setMap(map);// 添加到地图
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
	
</script>

  <div id="container"></div>