高德地图 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