【高德地图】基础操作速查

1.开发文档地址

高德地图2.0开发文档

2.引入地图js文件及插件

先创建地图应用，随后会得到 【Key】 与**【安全秘钥】**

在项目首页html文件上引用地图，并声明所需 地图插件（plugin=AMap.插件1，AMap.插件2）以英文逗号分割，

<script type="text/javascript">
	window._AMapSecurityConfig = {
		// serviceHost:'您的代理服务器域名或地址/_AMapService',  
		securityJsCode:'【此处为上图所示开发者安全密钥】',
	}
</script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=【此处为上图所示开发者安全密钥】&plugin=AMap.MarkerClusterer,AMap.ToolBar,AMap.Scale,AMap.ControlBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.MouseTool,AMap.PolygonEditor,AMap.Adaptor,AMap.GraspRoad,AMap.MoveAnimation,AMap.ToolBar"></script> 

3.地图初始化

this.map = new AMap.Map('container', {
  zoom: 11,//级别
  center: [116.397428, 39.90923],//中心点坐标
  viewMode: '3D',//使用3D视图
  layers: [//使用多个图层
    new AMap.TileLayer.Satellite({zIndex:10}),
    new AMap.TileLayer.RoadNet({zIndex:20})
  ],
});

4.添加与移除图层

// "showTrafficlayer" 为控制是否展示 “路况”图层标识变量

if (showTrafficlayer) {
  // 路况图层
  this.trafficLayer = new AMap.TileLayer.Traffic({
    zIndex: 15
  });
  this.map.add(this.trafficLayer);//添加图层到地图
} else {
  this.trafficLayer && this.map.remove(this.trafficLayer);// 从地图上移除该图层
  this.trafficLayer = null;
}

5.添加Marker

？how to 移除某一marker

var marker = new AMap.Marker({
  position: [116.39, 39.9],//位置
})
marker.setIcon(
  new AMap.Icon({
    image: '【图片URI】',
    imageSize: new AMap.Size(30, 30), // 图片大小
    imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
  })
)
this.map.add(marker);//添加到地图

6.覆盖物分组

initMarkersGroup() {
      var lnglats = [[116.39, 39.92], [116.41, 39.93], [116.43, 39.91], [116.46, 39.93]];
      var markers = [];
      var markers2 = [];
      for (var i = 0; i < lnglats.length; i++) {
        var lnglat = lnglats[i];
        // 创建点实例
        var marker = new AMap.Marker({
          position: new AMap.LngLat(lnglat[0], lnglat[1]),
        });
        var marker2 = new AMap.Marker({
          position: new AMap.LngLat(lnglat[0]+0.01, lnglat[1]+0.01),
        });
        marker.setIcon(
          new AMap.Icon({
            image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',
            imageSize: new AMap.Size(20, 30),
            imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
          })
        )
        marker2.setIcon(
          new AMap.Icon({
            image: 'https://s1.aigei.com/src/img/png/f7/f758c2eb1d7b483c8b1cb032a5c0a933.png?imageMogr2/auto-orient/thumbnail/!234x234r/gravity/Center/crop/234x234/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:SFfG1uQGP9YXmlC__Ux3BF_uiLE=',
            imageSize: new AMap.Size(20, 30),
            imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
          })
        )
        markers.push(marker);
        markers2.push(marker2);
      }
      var polyline2 = new AMap.Polyline({
          path: [
              new AMap.LngLat("116.377271","39.922501"),
              new AMap.LngLat("116.398258","39.904600")
          ],
           strokeColor: "red", //线颜色
          strokeWeight: 8,        //线宽
          strokeStyle: "solid",   //线样式
      });
      // 创建覆盖物群组，并将 marker 传给 OverlayGroup
      // Marker 这样搞
      this.overlayGroups1 = new AMap.OverlayGroup(markers);
      // 线条这样搞 addOverlay
      this.overlayGroups1.addOverlay(polyline2)
      this.overlayGroups2 = new AMap.OverlayGroup(markers2);
      this.map.add(this.overlayGroups1);
      this.map.add(this.overlayGroups2);
    },