高德地圖的一些使用心得

高德地圖是使用比較廣的地圖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中的點標記