高德地圖 開發

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

　　　　中國屬於北半球

　　　　所以，站在規定的方向上，往右經度越來越大，往上緯度越來越大。可以類比直角坐標系記憶。