高德地圖 Javascript API 入門（一）

高德地圖 Javascript API 入門（一）

準備工做

首先註冊個開發者帳號

而後建立應用，獲取Key

新建HTML文件，在body標籤中引入以下代碼（把你的Key值填入便可）

HTML

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

建立設置地圖容器

HTML

<div id="container"></div>

CSS

#container {width:300px; height: 180px; }

地圖初始化

建立地圖

JS

var map = new AMap.Map('container');

設置地圖參數

能夠經過如下設置
JS

var map = new AMap.Map('container',{
        zoom: 12,
        center: [112.549248,37.852135]
    });

也可經過map對象的方法設置

JS

var map = new AMap.Map('container');
    map.setZoom(12);
    map.setCenter([112.549248,37.852135]);

預覽

個性化地圖

改變地圖樣式

目前支持五種地圖配色模版

地圖類型列表

名稱	說明
normal	默認樣式
dark	深色樣式
blue_night	夜空藍樣式
fresh	淺色樣式
light	osm清新風格樣式

能夠這樣設置 JS

var map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle:'fresh',
        center: [116.408075, 39.950187]
    });

也能夠這樣設置
JS

map.setMapStyle("fresh");

預覽

顯示指定地圖內容（地圖要素）

名稱	說明
bg	背景地圖
point	興趣點
road	道路
building	建築

JS

map.setFeatures("road");//單一種類要素顯示
    map.setFeatures(['road','point'])//多個種類要素顯示

預覽（只顯示道路要素的地圖）

地圖控件

JavaScript API提供了工具條、比例尺、定位、鷹眼、基本圖層切換等經常使用的控件

名稱	類名	簡介
工具條	ToolBar	集成了縮放、平移、定位等功能按鈕在內的組合控件
比例尺	Scale	展現地圖在當前層級和緯度下的比例尺
定位	Geolocation	用來獲取和展現用戶主機所在的經緯度位置
鷹眼	OverView	在地圖右下角顯示地圖的縮略圖
類別切換	MapType	實現默認圖層與衛星圖、實施交通圖層之間切換的控

添加控件 JS

map.plugin(["AMap.ToolBar"],function () {
        map.addControl(new AMap.ToolBar()); // 工具條控件
    });

（其餘控件添加方式同上）

預覽（帶有工具條控件的地圖）

---

參考來源：http://lbs.amap.com/
做者：Yangfan