【原創】web端高德地圖javascript API的調用

關於第三放地圖的使用，騰訊、百度、高德

具體怎麼選擇看你本身怎麼選擇了。

高德地圖開放平臺：http://lbs.amap.com/

本次使用的是高德的javascript API http://lbs.amap.com/api/javascript-api/summary/

使用方法

1.註冊成爲高德地圖開發者，建立應用後申請key。

2.引入高德地圖API

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>

3.建立地圖容器

<div id="container"></div>   //width:300px; height: 180px;  指定大小樣式

4.建立默認地圖

方式一

var map = new AMap.Map('container');
map.setZoom(10);              //setzoom 指定縮放級別
map.setCenter([116.39,39.9]);  //指定地圖中心

方式二

var map = new AMap.Map('container',{
    zoom: 10,
    center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
});

如今地圖就出來

 

經常使用的地圖操做：

1. 搜索地點
2. 添加標記
3. 縮放比例尺空間
4. 地圖類型轉換
5. 路線指定

 添加標記

marker = new AMap.Marker({
    position: [116.39, 39.9],  //標記的地圖座標 
    map: map
});

若是是多個地點標記可使用數組。遍歷循環標記

for(var p in markers) {
	marker = new AMap.Marker({
	     position: markers[p],
	     map: map
        });
}

點標註能夠添加參數 自定義圖標

var marker = new AMap.Marker({
        icon : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px      //自定義圖標
        position : provinces[i].center.split(','),
        offset : new AMap.Pixel(-12,-12),
        map : mapObj
});

清楚標記

marker.setMap();

控件的添加

控件的種類

添加方式

1 AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
2     toolBar = new AMap.ToolBar();  //工具條
3     scale = new AMap.Scale();    //比例尺
4     mapType = new AMap.MapType();   //地圖種類
5     map.addControl(toolBar);
6     map.addControl(scale);
7     map.addControl(mapType);
8 })

刪除控件

map.removeControl(toolBar);

地圖搜索

關鍵字搜索插件提供某一特定地區的興趣點位置查詢服務。容許設置搜索城市、搜索數據類別、搜索結果詳略、搜索結果排序規則等。用戶能夠經過自定義回調函數取回並顯示查詢結果。若服務請求失敗，系統將返回錯誤信息。

使用插件以前，須要使用AMap.service方法加載插件，而後在回調函數中能夠進行服務的設定和查詢：

關鍵字搜索插件以及公交換乘插件（AMap.Transfer）、駕車（AMap.Driving）步行（AMap.Walking）路徑規劃插件、雲圖插件（AMap.CloudDataSearch）都有兩種使用方式：

第一種，在構造函數裏傳入map或panel參數，或二者都傳入。map爲AMap.Map實例，panel爲div元素或其id號。一旦傳入，api會自動爲用戶生成交互面板和地圖展現。用戶本身控制div的顯示位置及大小，api生成的交互面板和地圖展現的皮膚格調能夠經過修改樣式來實現，樣式名能夠經過瀏覽器的調試工具查看。實際上，面板的生成及地圖展現是用獨立的渲染插件實現的，用戶能夠把渲染插件下載下來任意修改默認皮膚的樣式及結構。代碼示例:

var placeSearch = new AMap.PlaceSearch({ //構造地點查詢類
    pageSize: 5,
    pageIndex: 1,
    city: "010", //城市
    map: map,
    panel: "result"
});
//關鍵字查詢
placeSearch.search('方恆', function(status, result) {
});

第二種，直接使用服務返回的數據，構造的option中不寫map和panel屬性，在search方法中傳入回調函數,如：

var placeSearch = new AMap.PlaceSearch({ //構造地點查詢類
    pageSize: 5,
    pageIndex: 1,
    city: "010"//城市
});
//關鍵字查詢
placeSearch.search('方恆', function(status, result) {
   //TODO:開發者使用result本身建立交互面板和地圖展現   result返回的一組包含地點信息的對象
});

 

輸入提示

AMap.Autocomplete根據輸入關鍵字提示匹配信息，「輸入提示」常常和「地點搜索」配合使用，容許用戶根據輸入提示匹配結果，進行相關POI搜索。您能夠根據「輸入提示」匹配信息，將Poi類型和城市做爲輸入提示和限制條件，並自定義回調函數來顯示查詢到的結果。當請求查詢失敗後，系統會返回錯誤信息。在使用插件以前，須要使用AMap.plugin方法加載插件，而後在回調函數中能夠進行服務的設定和查詢：

AMap.plugin('AMap.Autocomplete',function(){//回調函數
    //實例化Autocomplete
    var autoOptions = {
        city: "", //城市，默認全國
        input:"input_id"//使用聯想輸入的input的id
    };
    autocomplete= new AMap.Autocomplete(autoOptions);
    //TODO: 使用autocomplete對象調用相關功能
})

　　

輸入提示與POI搜索結合

一般聯想輸入提示與POI搜索結合使用，直接顯示出搜索結果。

AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
     var autoOptions = {
          city: "北京", //城市，默認全國
          input: "input"//使用聯想輸入的input的id
     };
     autocomplete= new AMap.Autocomplete(autoOptions);
     var placeSearch = new AMap.PlaceSearch({
              city:'北京',
              map:map
     });
     AMap.event.addListener(autocomplete, "select", function(e){
           //TODO 針對選中的poi實現本身的功能
           placeSearch.search(e.poi.name)
     });
 }); 

附上連接寫的小demo：http://runjs.cn/detail/dgc6rjoo