高德地图简单使用教程JS

一、写在前面

注意：这个文档介绍的内容需要获取高德开发者key，才能使用（充钱购买高德服务）

二、官方文档

文档是最好的教程，推荐看文档。
高德开放平台

api文档

三、文档构成

面对不同开发者有一下文档参考。我这里教程是面相JS API的 纯js代码。不同开发方式有不同的开发者key，这个需要注意。

四、创建key

注册登录，购买服务后。

可以每个系统创建一个应用，这个可随意，主要用来分类的。

这个类型，可以选比较贴合的，可能会筛查违规使用地图。

添加key

五、使用

高德地图，所有资源视乎都是线上的，没有什么静态js文件这些

引入高德地图方式：

这里是用JS API Loader

安全密钥 ，这个是保护key泄漏的，key直接放到页面中，很容易被盗取。具体可以看这里。

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  //这个要写，不然一些插件会用不了
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  var map
   AMapLoader.load({ //首次调用 load
        key:'',//首次load key为必填
        version:'2.0',
        plugins:['AMap.Scale','AMap.ToolBar']
    }).then((AMap)=>{
        map = new AMap.Map('container');
        map.addControl(new AMap.Scale())
        map.addControl(new AMap.ToolBar())
        map.add(new AMap.Marker({
            position:map.getCenter()
        }));
    }).catch((e)=>{
        console.error(e);
    });
   	
   	//可以多次调用，第二次调用可以省略第一次调用的很多配置。
    AMapLoader.load({ //可多次调用load
        plugins:['AMap.MapType']
    }).then((AMap)=>{
       // 注意多次使用如果要叠加效果，需要将内容放到同一个map里面
        map.addControl(new AMap.MapType())
    }).catch((e)=>{
        console.error(e);
    });
</script>

（一）了解插件

插件列表

（二）例子

折线编辑插件使用

//引入折线编辑器插件
map.plugin(["AMap.PolylineEditor"], function () {
  //实例化折线编辑器，传入地图实例和要进行编辑的折线实例
  polylineEditor = new AMap.PolylineEditor(map, polyline);
  //开启编辑模式
  polylineEditor.open();
});

完整代码：

  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({ //首次调用 load
                key: mapKey,//首次load key为必填
                version: '2.0',
                plugins: ['AMap.Scale','AMap.ToolBar', 'AMap.PolylineEditor']
            }).then((AMap) => { 
         	var map = new AMap.Map('container');
        	map.addControl(new AMap.Scale())
        	map.addControl(new AMap.ToolBar())
        	map.add(new AMap.Marker({
            	position:map.getCenter()
            }));
            //配置折线路径
			var path = [
  				new AMap.LngLat(116.368904, 39.913423),
  				new AMap.LngLat(116.382122, 39.901176),
  				new AMap.LngLat(116.387271, 39.912501),
  				new AMap.LngLat(116.398258, 39.9046),
			];
			//创建 Polyline 实例
			var polyline = new AMap.Polyline({
  				path: path,
  				strokeWeight: 2, //线条宽度
  				strokeColor: "red", //线条颜色
  				lineJoin: "round", //折线拐点连接处样式
			});
            var polylineEditor = new AMap.PolylineEditor(map, polyline);
  			//开启编辑模式
			polylineEditor.open();
			}).catch((e) => {
                console.error(e);
            });

（三）不是所有AMap.XXX都是插件

比如： AMap.Polyline。
这个不用在plugins声明，直接new就能使用了

六、计算距离、长度、面积

文档

七、绘制轨迹和计算轨迹长度

文档上有两种绘制轨迹方式，一种是折线，一种是贝塞尔曲线

这里讲一下怎么绘制折线，其实前面折线编辑插件已经有使用过。

//注意：point 是一个点对象数组。如下
/*
[{'lng':112.637039,'lat':34.796399},{'lng':113.637039,'lat':34.796399},{'lng':114.637039,'lat':34.796399}]
*/
AMapLoader.load({
    key: mapKey,//首次load key为必填
    version: '2.0',
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MapType', 'AMap.MouseTool']
}).then((AMap) => {
	//初始化地图 ,设置轨迹中心点
    let lng = 116.362209;
    let lat = 39.887487;
    if (point.length > 0) {
        lng = point[0].lng + point[0].glng;
        lat = point[0].lat + point[0].glat;
    }
    var map = new AMap.Map('container', {
        zoom: 15, //初始地图级别
        center: [lng, lat], //初始地图中心点
    });
    map.addControl(new AMap.Scale())
    map.addControl(new AMap.ToolBar())
    map.addControl(new AMap.MapType({
        defaultType: 1
    }))
    map.add(new AMap.Marker({
        position: map.getCenter()
    }));
    return map;
}).then((map) => {
	// 绘制轨迹
    let path = [];
    for (let i = 0; i < point.length; i++) {
        let lnglat = [];
        let lng = point[i].lng + point[i].glng;
        let lat = point[i].lat + point[i].glat;
        lnglat.push(lng);
        lnglat.push(lat);
        path.push(lnglat)
    }
    var polyline = new AMap.Polyline({
        path: path,
        strokeStyle: "solid",
        strokeColor: "red"
    })
	
	//计算轨迹长度
	//调用AMap.Polyline 提供的方法就能获取轨迹长度
	let length = polyline.getLength(isTerrain)
	
    //把轨迹，绘制到地图
    map.add([polyline]);
    map.setFitView();
    map.setZoom(15);
    return map;
}).catch((e) => {
    console.error(e);
});

折线类文档

获取轨迹长度方法详细如下：