高德地圖是使用比較廣的地圖api，給開發者提供了呼叫api的例項和模板。

要使用高德地圖，首先需要申請成為高德地圖開發者，因為需要用到高德的key。

支援的開發端比較廣

現在介紹一下js端的開發

首先是顯示地圖

很簡單的

先載入高德的js檔案

    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.1&key={{ key }}
 
"></script>

    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

然後就可以開始在寫js了

要顯示地圖需要一個div元素來展示

<div id="mapContainer"></div>

然後在js裡面新增以下程式碼

        var map = new AMap.Map("mapContainer", {
            resizeEnable:
 
true,
            center: [120.155070,30.274084],
            zoom: 13,
        });

mapContainer是展示地圖的div的id，

resizeEnable就是是否可以調整地圖大小

center是指地圖的中心點的經緯度

zoom是指地圖的層級

下面介紹下常用的外掛

輸入提示，搜尋，以及經緯度查詢

AMap.plugin(["AMap.Autocomplete","AMap.PlaceSearch", "AMap.Geocoder"], function(){
            placeSearch 
 
= new AMap.PlaceSearch({
                city: "杭州",
                map: map,
                pageSize: 1,
                pageIndex: 1,
            });
            geocoder = new AMap.Geocoder({
                city: "",
            })
            var autoOptions = {
                city: "杭州",
                input: "work-location"
            };
            autocomplete = new AMap.Autocomplete(autoOptions);
            AMap.event.addListener(autocomplete, "select", function(e){
                placeSearch.search(e.poi.name,function(status, result){
                });
            });
        });

Autocomplete是輸入提示外掛
只需要構造一個包含city城市和input(輸入框id)的字典，作為引數傳給AMap.Autocomplete
詳情見http://lbs.amap.com/api/javascript-api/guide/map-data/input_prompt

PlaceSearch是搜尋外掛
只需要構造一個包含city和map(地圖)的字典，作為引數傳給AMap.PlaceSearch
常用的方法有search和searchNearBy，搜尋關鍵詞和搜尋周邊
詳情見http://lbs.amap.com/api/javascript-api/guide/map-data/search

Geocoder是經緯度查詢外掛
構造一個包含city的字典，作為引數傳給AMap.Geocoder
常用的方法有getAddress,getLocation分別用來用經緯度獲取地址和地址獲取經緯度
詳情見http://lbs.amap.com/api/javascript-api/guide/map-data/geocoding
接著說下建立點標記

                                var marker = new AMap.Marker({
                                    map: map,
                                    title: name,
                                    position: location,
                                })
                                rentalMarkers.push(marker);
                                var label = new AMap.Marker({
                                    map: map,
                                    title: name,
                                    content: html,
                                    position: location,
                                    offset: new AMap.Pixel(-12,-12),
                                })
                                rentalLabels.push(label);

marker就是一個點標記，label是其對應的標註

最後要提到的是
點標記如何刪除
如果是我們自己建立的點標記
可以使用map.remove(markers)刪除
markers可以是一個點標記元素也可以是一個包含點標記元素的陣列
如果是高德搜尋周邊得到的點標記就稍微麻煩一點

            if(nearbySearch){
                nearbySearch.clear();
                if(nearbySearch.render){
                    nearbySearch.render.markerList.clear();
                }
            }

nearbySearch是一個PlaceSearch物件

clear方法刪除外圈的圓，接著是清空所有的nearbySearch中的點標記