html高德api,高德地图 Javascript API 入门（一）

完整系列，请查看我的博客

准备工作

首先注册个开发者账号

然后创建应用，获取Key

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

复制代码

预览

高德地图

个性化地图

改变地图样式

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

地图类型列表

名称说明

normal默认样式

dark深色样式

blue_night夜空蓝样式

fresh浅色样式

lightosm清新风格样式

可以这样设置

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()); // 工具条控件

});

复制代码

(其他控件添加方式同上)

预览(带有工具条控件的地图)