准备工作
注册Key
首先,
登陆之后,在进入「应用管理」 页面「创建新应用」
为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
记住这个Key,等会要用,以后可能也会用,一定要记住。
页面上的准备
新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必须新建一个挂载点)。
给这个新建的div设置好宽高(这里提醒一下,可以使用弹性布局,没有影响)。
在body后面引入高德地图的js。
最后,异步初始化高德地图插件,一定要异步,使用window.onLoad。(去获取标记点的经纬度)
【注】 高德地图Api入门指南
#container{
width: 500px;
height: 500px;
}
//初始化地图插件
window.onload = function(){
var map = new AMap.Map("container", {
zoom: 15, //设置地图显示的缩放级别
center: [116.44927, 39.9584] //设置地图中心点坐标
});
// 创建一个 Marker 实例:(标记点)
var marker = new AMap.Marker({
position: new AMap.LngLat(116.44927, 39.9584), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: "位置标题"
});
// 将创建的点标记添加到已有的地图实例:
map.add(marker);
}
好了,现在你的页面上已经出现了高德地图