高德地图 Javascript API 入门（一）

准备工作

---

首先注册个开发者账号

image

然后创建应用，获取Key

image

新建HTML文件，在body标签中引入如下代码（把你的Key值填入即可）

HTML

创建设置地图容器

HTML

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]);

预览

image

个性化地图

改变地图样式

目前支持五种地图配色模版

地图类型列表

名称	说明
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");

预览

image

显示指定地图内容（地图要素）

名称	说明
bg	背景地图
point	兴趣点
road	道路
building	建筑

JS

    map.setFeatures("road");//单一种类要素显示
    map.setFeatures(['road','point'])//多个种类要素显示

预览（只显示道路要素的地图）

image

地图控件

JavaScript API提供了工具条、比例尺、定位、鹰眼、基本图层切换等常用的控件

名称	类名	简介
工具条	ToolBar	集成了缩放、平移、定位等功能按钮在内的组合控件
比例尺	Scale	展示地图在当前层级和纬度下的比例尺
定位	Geolocation	用来获取和展示用户主机所在的经纬度位置
鹰眼	OverView	在地图右下角显示地图的缩略图
类别切换	MapType	实现默认图层与卫星图、实施交通图层之间切换的控

添加控件

JS

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

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

预览（带有工具条控件的地图）

image

---

参考来源：http://lbs.amap.com/
作者：Yangfan