html页面调用高德地图,html前端使用高德地图入门教程

文章目录开始准备工作注册Key前期页面上的准备插件使用插件使用步骤引入插件定位自定义地图显示位置和缩放级别添加实时路况图层获取定位信息(需要使用插件)浏览器定位IP定位获取当前城市信息覆盖物添加覆盖物获取覆盖物覆盖物的操作图层设置图层获取图层移除图层3D地图未完待续...

开始

准备工作

注册Key

如果开发者账号包括Key已经有了，请忽略此步骤

首先，注册开发者账号，成为高德开放平台开发者

登陆之后，在进入「应用管理」 页面「创建新应用」

为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

记住这个Key，等会要用，以后可能也会用，一定要记住。

前期页面上的准备

此时距离你的页面上出现地图，已经更近了一步

新建一个DIV，作为地图的容器(这一步和使用其他插件一样，必须新建一个挂载点)。

给这个新建的div设置好宽高(这里提醒一下，可以使用弹性布局，没有影响)。

在body后面引入高德地图的js。

最后，异步初始化高德地图插件，一定要异步，使用window.onLoad。

//新建一个容器

//设置宽和高

#wrapper{

width: 500px;

height: 500px;

}

//引入js

* 这里需要刚才申请的Key

//初始化地图插件

window.onload = function(){

var map = new AMap.Map('wrapper');

}