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

}

好了，现在你的页面上已经出现了高德地图

插件使用

地图本身功能有限，很多地方需要使用插件满足自己的需求

插件使用步骤

引入插件

创建插件实例

调用插件方法

引入插件

1.异步引入插件(推荐这种)

//引入单个插件

AMap.plugin(‘AMap.ToolBar’,function(){//异步加载插件

var toolbar = new AMap.ToolBar();

map.addControl(toolbar);

});

//引入多个插件

AMap.plugin([‘AMap.ToolBar’,’AMap.Driving’],function(){//异步同时加载多个插件

var toolbar = new AMap.ToolBar();

map.addControl(toolbar);

var driving = new AMap.Driving();//驾车路线规划

driving.search(/*参数*/)

});

2.同步引入插件(不推荐使用，就不讲了)

定位

如果在地图初始化时不配置中心点，和缩放级别，这个时候地图上面默认是你所处的位置，缩放级别也是默认的

PC端默认是IP定位，如果IP定位无法使用则会自动切换到浏览器定位

移动端默认是浏览器定位，如果浏览器定位无法使用则会自动切换到IP定位

自定义地图显示位置和缩放级别

//对于地图的自定义，属性有很多，只列举三个

var map = new AMap.Map(‘container’, {

zoom:11,//缩放级别

center: [116.397428, 39.90923],//地图显示中心点坐标，如果没有center属性，则会定位到你当前所处的位置

viewMode:’3D’//使用3D视图

});

添加实时路况图层

//实时路况图层

var trafficLayer = new AMap.TileLayer.Traffic({

zIndex: 10

});

map.add(trafficLayer);//添加图层到地图

获取定位信息(需要使用插件)

浏览器定位

map.plugin(‘AMap.Geolocation’, function() {

var geolocation = new AMap.Geolocation({

// 是否使用高精度定位，默认：true

enableHighAccuracy: true,

// 设置定位超时时间，默认：无穷大

timeout: 10000,

// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)

buttonOffset: new AMap.Pixel(10, 20),

// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

zoomToAccuracy: true,

// 定位按钮的排放位置, RB表示右下

buttonPosition: ‘RB’

})

geolocation.getCurrentPosition()

AMap.event.addListener(geolocation, ‘complete’, onComplete)

AMap.event.addListener(geolocation, ‘error’, onError)

function onComplete (data) {

// data是具体的定位信息

}

function onError (data) {

// 定位出错

}

})

IP定位获取当前城市信息

AMap.plugin(‘AMap.CitySearch’, function () {

var citySearch = new AMap.CitySearch()

citySearch.getLocalCity(function (status, result) {

if (status === ‘complete’ && result.info === ‘OK’) {

// 查询成功，result即为当前所在城市信息

}

})

})

覆盖物

目前只用到点标记，所以暂时只讲点标记

添加覆盖物

点标记

使用点标记肯定都是自定义点标记，可以自定义图片，字体等

var marker = new AMap.Marker({ //添加自定义点标记

map: map,

position: [116.397428, 39.90923], //基点位置

offset: new AMap.Pixel(-17, -42), //相对于基点的偏移位置

draggable: true, //是否可拖动

content: ‘

});

//可以使用css对content里面的dom元素设置样式

灵活点标记

标记大小会随着地图缩放跟着变化

导航，导航同样属于覆盖物范围

//导航需要一个起点和终点

var driving = new AMap.Driving({

map: map,

panel: “panel”

});

// 根据起终点经纬度规划驾车导航路线

driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));

海量点标记MassMarks

海量点标记不是普通的覆盖物，它实际上是由海量点组成的一个图层

对于1000个以上的点标记，强烈建议海量点，相当于减少dom操作，极大的提升了浏览器性能

// 创建样式对象

var styleObject = new AMap.StyleObject({

url: ‘//vdata.amap.com/icons/b18/1/2.png’, // 图标地址

size: new AMap.Size(11,11), // 图标大小

anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角

});

// 创建海量点

var massMarks = new AMap.MassMarks({

zIndex: 5, // 海量点图层叠加的顺序

zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层

style: styleObject // 设置样式对象

});

// 海量点信息

var data = [{

lnglat: [116.405285, 39.904989], //点标记位置

name: ‘beijing’,

id:1

}, // {}, …,{}, …

];

massMarks.setData(data);

// 将海量点添加至地图实例

massMarks.setMap(map);

获取覆盖物

//获取所有的覆盖物(点标记，导航等)

that.map.getAllOverlays();

//获取所有的点标记

that.map.getAllOverlays(‘marker’);

这里获取所有的点标记或覆盖物，意思是地图上面所有的添加的点标记或者覆盖物，而不是当前视野范围内的点标记或者覆盖物,如果有需求是获取当前视野范围内的点标记或覆盖物，就需要自己根据这个方法写了。具体什么方法，如果有想了解的，请在下方留言。

覆盖物的操作

1.删除所有覆盖物

// 使用clearMap方法删除所有覆盖物

map.clearMap();

2.删除点标记

// 单独移除点标记

map.remove(marker);

3.取消导航

//取消导航覆盖物

driving.clear();

//一般覆盖物都会有隐藏和显示的方法，这个可以极大的优化性能，因为增加和删除覆盖物操作非常浪费性能。

4.覆盖物隐藏

marker.hide();

5.覆盖物显示

marker.show();

图层

设置图层

// 构造官方卫星、路网图层

var layers = [

new AMap.TileLayer.Satellite(),

new AMap.TileLayer.RoadNet()

]

// 地图上设置图层

map.setLayers(layers);

获取图层

//获取图层数据

map.getLayers();

移除图层

// 移除一个图层

// layer1指的是建立图层的变量

map.remove(layer1);

3D地图

var map = new AMap.Map(‘container’, {

pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度

viewMode:’3D’ // 地图模式

});

未完待续…