高德地圖 Javascript API 入門（一）

完整系列，請查看個人博客

高德地圖 Javascript API 入門（一）
高德地圖 Javascript API 入門（二）
高德地圖 Javascript API 入門（三）
高德地圖 Javascript API 入門（四）
高德地圖 Javascript API 入門（五）
高德地圖 Javascript API 入門（六）
高德地圖 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()); // 工具條控件
	});
複製代碼

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

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

---

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