高德地圖開發

時間 2019-12-13

標籤地圖開發简体版

原文原文鏈接

一、高德地圖開發文檔：https://lbs.amap.com/api/javascript-api/summaryjavascript

　在線編輯預覽：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-showhtml

（我的）能夠把地圖的建立使用過程，想象成 vue 的建立使用過程。都有生命週期，建立完成以後再將真實的 DOM 節點插入到對應的掛載元素上。vue

key值：java

<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/52387502web

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

一、建立地圖（建立的同時能夠給地圖設置中心點、級別、顯示模式、自定義樣式等屬性）

二、圖層（默認狀況下，地圖只顯示標準底圖，如須要疊加別的圖層，能夠經過 `map.add`方法添加圖層）

　　JS API 提供了標準、衛星、路網、路況、建築等多個官方圖層，同時也提供了加載第三方WMS、WMTS、XYZ等標準圖層的接口，也提供了把通常的圖片、Canvas、視頻、熱力等做爲圖層的能力ide

疊加路況圖層後 ui

    //實時路況圖層
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    map.add(trafficLayer);//添加圖層到地圖

三、點標記與矢量圖形（都支持事件）

　　JS API 提供了在地圖之上繪製覆蓋物的能力，好比點標記 Marker、文本標記 Text、圓點標記 CircleMarker。（也提供了繪製圓Circle、折線 Polyline、多邊形 Polygon、橢圓 Ellipse、矩形 Rectangle、貝瑟爾曲線 BesizerCurve等矢量圖形的能力）spa

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

　　移除的方法以下：.net

    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] //初始化地圖中心點
    });