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

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

支持的開發端比較廣

現在介紹一下js端的開發

首先是顯示地圖

很簡單的

先加載高德的js文件

    <link rel="stylesheet" />
    <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中的點標記

總結

以上是生活随笔為你收集整理的高德地图的一些使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。