高德地图 开发

1、高德地图开发 文档  ：https://lbs.amap.com/api/javascript-api/summary

　  在线编辑  预览      ：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show

 （个人）可以把地图的创建使用过程，想象成 vue 的创建使用过程。都有生命周期，创建完成之后 再将真实的 DOM 节点插入到对应的 挂载元素上。

   key值 ：

<script src="https://webapi.amap.com/maps?v=1.4.9&key=e396ba49399513e60262b3a8653d5d4f"></script>

2、高德地图最简单教程 ： https://blog.csdn.net/qq_39588818/article/details/79421025  或 https://www.cnblogs.com/milkmap/p/3687855.html （比较详细） 或 https://blog.csdn.net/wuyou1336/article/details/52387502

3、手机定位的原理 ： http://www.sohu.com/a/76257016_335896

---

一、创建地图，地图的底图 （创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性）

    var map = new AMap.Map('container', {
        zoom:11  //级别
    });

二、地图生命周期：

　　1、创建地图对象：这个就是上面的创建地图。

var map = new AMap.Map('container');

　　2、地图加载完成： 这个可以控制地图加载出来前，loading显示。

map.on('complete', function(){
    // 地图图块 加载完成 后触发
});

　　3、销毁地图对象： 这个只是一个 销毁的 API

map.destroy( );

三、覆盖物：（点标记、地图控件、矢量图形、信息窗体 等）

　　1、点标记：

var marker = new AMap.Marker({   // 创建一个 Marker 实例：
    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});

map.add(marker);  // 将创建的点标记添加到已有的地图实例：

　　2、地图控件：

AMap.plugin([
    'AMap.ToolBar',
], function(){
 
    map.addControl(new AMap.ToolBar());   // 将控件添加到已有的地图实例
});

　　3、矢量图形：   折线、面、圆形等覆盖物

// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
var path = [
    new AMap.LngLat(116.368904,39.913423),
    new AMap.LngLat(116.382122,39.901176)
];

var polyline = new AMap.Polyline({   // 创建折线实例
    path: path,  
    borderWeight: 2, // 线条宽度，默认为 1
    strokeColor: 'red', // 线条颜色
    lineJoin: 'round' // 折线拐点连接处样式
});

map.add(polyline);   // 将折线添加至地图实例

　　4、窗体信息：   信息窗体 是可以 随地图移动的。

　　　　a、地图上只允许 同时展示1个信息窗体

              // 信息窗体的内容
        var content = `<div>这是信息窗体！这是信息窗体</div>`

        // 创建 infoWindow 实例    
        var infoWindow = new AMap.InfoWindow({
            content: content    //传入 dom 对象，或者 html 字符串
        });

        // 打开信息窗体
        infoWindow.open(map, map.getCenter());   // 这里要注意，窗体显示的坐标。默认的坐标不一定看得到，一般需要配。自己配置成 map.getCenter()

四、图层 （默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过 map.add方法 添加图层）

　　JS API 提供了标准、卫星、路网、路况、建筑等多个官方图层，  同时也提供了加载第三方WMS、WMTS、XYZ等标准图层的接口，也提供了把一般的图片、Canvas、视频、热力等作为图层的能力

          叠加 路况图层后          

    //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    map.add(trafficLayer);//添加图层到地图

五、事件系统：

　　1、对整个地图 的事件：具体的事件 类型有哪些，看官方文档。

var map = new AMap.Map("container");
var clickHandler = function(e) {
  alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
};

// 绑定事件
map.on('click', clickHandler);
// 解绑事件
map.off('click', clickHandler);

　　2、覆盖物、叠加层对象的 事件：和map事件绑定方式是一样的。

六、其它一些功能：其它一些功能不常用，需要的话，到官方文档上找资料就可以了。这里就不介绍了。

　　1、计算距离（ 各种距离）

　　2、区域面积

　　3、计算线面关系等（如点是否在面内）

　　等等。。。

七、UI组件库 （上面的结构，UI组件库中也有，组件库中有多种样式选择）

 　　a、SimpleMarker（简单标注）库 。继承自AMap.Marker（所以上面的信息窗体的属性方法，这里的可以使用）。在已有功能的基础上，额外增加一些功能。就是上面的 点标记的功能，但是样式更多的定制性。

　　b、SimpleInfoWindow（简单信息窗体）库。 继承自  AMap.InfoWindow，所以上面的信息窗体的属性方法，这里的可以使用，即 SimpleInfoWindow 是 AMap.InfoWindow对象的扩展。

　　c、PositionPicker（拖拽选址） 库。 用于在地图上选取位置，并获取所选位置的地址信息，以及周边POI、周边道路、周边路口等信息。（这个图标和 点标记 不同的地方是，PositionPicker这个图标是获取当前定位点的信息的）

 

 

 

 

 

 

---

webpack 中使用高德地图（如react 和 vue上使用高德地图）

说明：直接在webpack中使用 地图，直接通过script标签引入使用也是可以的。如果会有问题，也可以使用 模块形式的 react-amap。

var map = new AMap.Map('container',{});   // 这里会报 AMap 未定义的错误

　1、react 中 使用地图，有一个 react-amap 插件：https://elemefe.github.io/react-amap/articles/start（react-amap 里面提供的  功能样式 和官网上的还是有差异 的）

　　a、里面可以自定义 地图的 版本

　　b、其它的和高德官网上的是一样的，只是需要通过属性把值传递进去。

 

---

知识扩展：

地球经纬线：https://baike.baidu.com/item/%E7%BB%8F%E7%BA%AC%E7%BA%BF/5596978?fr=aladdin

　　1、经度：

　　　　若数值向东越来越大，则是东经；若数值向西越来越大，则是西经。

　　2、纬度：

　　　　若数值向北越来越大，则是北纬；若数值向南越来越大，则是南纬。

　　3、我国的地理坐标：对于开发而言，其它的国家的坐标基本不会用到，不用管。       http://www.gaosan.com/gaokao/231977.html

　　　　定一个方向：.一般定向法——面对地图，上北下南，左西右东。

　　　　经度范围：73°33′ E  至  135°05′ E

　　　　纬度范围：3°51′   N  至   53°33′  N

　　　　中国属于北半球

　　　　所以，站在规定的方向上，往右经度越来越大，往上纬度越来越大。可以类比直角坐标系记忆。