高德地图 开发

一、高德地图开发 文档  ：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>

二、高德地图最简单教程 ： https://blog.csdn.net/qq_39588818/article/details/79421025  或 http://www.javashuo.com/article/p-snugnhzo-mc.html （比较详细） 或 https://blog.csdn.net/wuyou1336/article/details/52387502

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

---

一、建立地图 （建立的同时能够给地图设置中心点、级别、显示模式、自定义样式等属性）

二、图层 （默认状况下，地图只显示标准底图，如须要叠加别的图层，能够经过 map.add方法 添加图层）

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

          叠加 路况图层后          

 

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

三、点标记与矢量图形 （都支持事件）

　　JS API 提供了在地图之上绘制覆盖物的能力，好比点标记 Marker、文本标记 Text、圆点标记 CircleMarker。（也提供了绘制圆Circle、折线 Polyline、多边形 Polygon、椭圆 Ellipse、矩形 Rectangle、贝瑟尔曲线 BesizerCurve等矢量图形的能力）

    var marker = new AMap.Marker({
        position:[116.39, 39.9]//地理坐标位置
    })
    map.add(marker);//添加到地图

　　移除的方法以下：

    map.remove(marker)

四、信息窗体 （信息窗体通常都是和事件结合起来使用的）

   //构建信息窗体中显示的内容
   var info = [];
    info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
    info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
    info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
    info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");

    var infoWindow = new AMap.InfoWindow({
        content: info.join("")  //使用默认信息窗体框样式，显示信息内容
    });

    infoWindow.open(map, map.getCenter());

信息窗体，默认在界面中心点出现，可是能够随地图移动。

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

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

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

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

 

 

 

---

 

其余 概括

二、地图生命周期

a、建立地图：

    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });

三、覆盖物

　　a、覆盖物是随地图移动的，覆盖物上有对应的 事件。 可 点击、推拽 等

四、UI组件库 ：https://lbs.amap.com/api/javascript-api/guide/amap-ui/intro/

　　（我的猜想）除了地图自带的一些方法属性，后面添加的 UI 都是经过组件 实现的。 

 　　a、PositionPicker（拖拽选址）。  

　　 b、SimpleInfoWindow（简单信息窗体），信息窗体能够随地图移动也能够不随地图移动。

　　。。。其它 组件 参考文档

五、定位 https://lbs.amap.com/api/javascript-api/guide/services/geolocation 

　　a、触发定位的小图标

　　b、位置 显示的小图标

 

。。。。。其余具体参考开发文档

 

总结：

一、高德地图开发，界面通常分三块 ：

　　a、标准底图，直接建立地图就能够

　　b、随地图移动的图标文字 ( 随地图移动的，也就是固定地理坐标的。如：覆盖物)

　　c、不随地图移动的元素  ( 如：信息窗体)