高德地圖在h5項目中的集成（點標記）

關於高德地圖在項目中的集成，網上已經有不少相關的很優秀的文章了，故本篇內容僅用於參考和鞏固。

 1.使用高德地圖以前須要在高德開放平臺(https://lbs.amap.com/dev/index)建立一個key

有這個key以後就能夠進行開發了。

2.在項目中引入外部文件，將連接中的key替換本身的key就能夠了

3.在文件中添加div標籤座位容器，添加div的指定id屬性

4，準備加載地圖，加載地圖有多種方法，詳情請參考https://lbs.amap.com/api/javascript-api/guide/abc/load，本文中咱們僅使用順序同步加載，這種方式下，地圖初始化的代碼要放在 JS API 的腳本標籤以後：

5.因爲本次項目中要實現的效果是多種點標記，咱們在生成標記點時，對數據源進行篩選，不一樣類型的點對應不一樣的圖標，

先定義空數組var markers = [];將循環生成的點標記數據放進數組中，就會生成對應的不一樣標記類型的點（在生成標記時能夠設置標記點的一些屬性，根據本身的須要進行設置，詳情參考https://lbs.amap.com/api/javascript-api/guide/overlays/marker）

 

6.若是須要初始化的時候視野內出現全部的標記點，可使用map.setFitView();方法,反之則不須要

7.由於本次項目還涉及到簡單的定位，因此使用了插件AMap.Geolocation，使用此插件時須要注意請求須要爲https,不然會報錯

 

引入插件時能夠設置定位的一些細節顯示，根據須要設置，詳情參考https://lbs.amap.com/api/javascript-api/guide/services/geolocation

因爲本次項目只涉及簡單定位，因此簡單的設置了一下，咱們在得到定位之後可使用map.setZoomAndCenter(num, lng, lat])來設置縮放級別和中心點經緯度

須要注意的是AMap.Geolocation定位是異步，一些處理方法能夠寫在回調中

當頁面中涉及到地圖相關的點擊事件事，可使用如下方法進行監聽

 AMap.event.addDomListener(document.getElementById('positionIcon'), 'click', function() {}）

最終實現效果爲

 本文是一些簡單的使用，具體的用法還需參考官網