导航兔：

Web地图开发【高德地图API】	导航地址
Web地图开发【高德地图API】(一)	https://qianmoer.blog.csdn.net/article/details/128425601
Web地图开发【高德地图API】(二)	https://qianmoer.blog.csdn.net/article/details/128425657

1、图层

1.1、高德官方图层

1.1.1、标准图层

您可以按照如下方法声明和创建一个标准图层，然后给地图对象设置layers属性，将其添加到地图中。

var layer = new AMap.createDefaultLayer({zooms:[3,20],    //可见级别visible:true,    //是否可见opacity:1,       //透明度zIndex:0         //叠加层级
})
var map = new AMap.Map('container',{layers:[layer] //当只想显示标准图层时layers属性可缺省
});

如果在地图初始时您只需要标准图层，那么地图对象的layers属性可以缺省，我们将为您自动添加一个标准图层：

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

属性	类型	说明
zooms	[Number,Number]	支持的缩放级别范围，默认范围 [2-30]
dataZooms	[Number,Number]	数据支持的缩放级别范围，默认范围 [2-30]
opacity	Number	透明度，默认 1
visiable	Boolean	是否显示，默认 true
zIndex	Number	图层叠加的顺序值，1 表示最底层。默认 zIndex：4

1.1.2、卫星与路网图层

卫星图层与路网图层通常一起使用，这两个图层的创建和使用方法和TileLayer类似，只需要修改类名为对应的类名即可。

var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();var map = new AMap.Map('container',{zoom:10,layers:[satellite,roadNet]
});

1.1.3、实时交通图层

实时交通图层用于展示当前时刻的道路交通状况，不同的颜色代表不同的拥堵程度

暗红色代表极度拥堵，绿色代表通畅，灰色代表路况不明。
作为一种特殊的TileLayer，使用方法同卫星、路网等官方图层一样。
特殊之处在于可以通过autoRefresh和interval参数指定是否自动刷新和刷新周期。

var map = new AMap.Map('container',{zoom:10
})var traffic = new AMap.TileLayer.Traffic({'autoRefresh': true,     //是否自动刷新,默认为false'interval': 180,         //刷新间隔,默认180s
});map.add(traffic); //通过add方法添加图层
//map.remove(traffic) //需要时可以移除

1.1.4、楼快图层

楼块图层专门用来展示矢量的建筑物层，与标准图层中的楼块要素的效果相同，所以使用时应先通过features属性隐藏地图的默认楼块
二者区别在于，楼块图层显示的级别范围较标准图层中的楼块大，可以用来实现一些特殊的效果，3D 视图下还可以为楼块指定高度比例系数heightFactor。
与其他图层不同，楼块图层的有效级别范围为[ 17, 20 ]

var satellite = new AMap.TileLayer.Satellite();         // 默认图层
var buildings = new AMap.Buildings({'zooms':[16,18],'zIndex':10,'heightFactor':2,    //2倍于默认高度，3D下有效'wallColor': 'red'    //楼块侧面颜色
});//楼块图层    var map = new AMap.Map('container', {center: [116.397428, 39.90923],viewMode:'3D',pitch:60,rotation:-35,features:['bg','road','point'],//隐藏默认楼块mapStyle:'amap://styles/light',layers:[satellite,Buildings]zoom: 17
});

属性	类型	描述
wallColor	String	楼块侧面颜色，支持 rgba、rgb、十六进制等
roofColor	String	楼块顶面颜色，支持 rgba、rgb、十六进制等
heightFactor	Number	楼块的高度系数因子，默认为 1，也就是正常高度

1.1.5、室内地图

当地图处在合适的级别下，移动到有室内地图的地方就会自动显示室内地图。
可以通过监听地图 indoor_create 事件来获取这个室内图层，取得控制权。
①默认室内图层

// 调用默认室内图层
var map = new AMap.Map('container',{showIndoorMap: true, //显示地图默认的室内地图图层
});
map.on('indoor_create',function(){map.indoorMap.showIndoorMap('B000A8VT15',4); // 显示指定 POI 室内信息
})

官方参考手册有很多成员函数：室内地图

②独立的室内图层
当然，也可以自己来创建室内图层，这时需要将地图的默认室内图层隐藏，如：

1.2、简易行政区图

世界简易行政区图层AMap.DistrictLayer.World
国家简易行政区图层 AMap.DistrictLayer.Country
省市简易行政区图层 AMap.DistrictLayer.Province
这些图层各自的使用场景为:

名称	适用范围
AMap.DistrictLayer.World	`世界全部国家和地区`的区域面和边界一并展示，可分别配置各国区域面的颜色，统一配置国界线、海岸线的颜色
AMap.DistrictLayer.Country	`单独展示某个国家或地区`的所有省级行政区域，可配置国界颜色、分别配置各省区域的面填充色和边界颜色；中国支持全部地级市一级的展示，可配置国界颜色、省界线、市界限颜色和省、市区域的面填充色
AMap.DistrictLayer.Province	单独展示一个或者组合展示多个`中国行政区`的区域，支持展示省级、市级、县级。可配置各省、市、县的边界颜色和面填充色

在使用这组图层之前首先需要引入AMap.DistrictLayer插件，

1.2.1、世界简易行政区图层

2、地图和覆盖物事件

除了地图展示外，当我们在地图上进行操作时，少不了要对各种交互事件进行处理。

2.1、事件绑定和解绑

和大多数类库使用方式相同，直接使用 Map、覆盖物对象的 on、off 方法

var map = new AMap.Map("container");
var clickHandler = function(e) {console.log(e);alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');// alert('您在[ '+e.lnglat.lng+','+e.lnglat.lat+' ]的位置点击了地图！');// 触发事件的对象console.log(e.target);// 触发事件的地理坐标console.log(e.lnglat);// 触发事件的像素坐标console.log(e.pixel);// 触发事件类型console.log(e.type);
};// 绑定事件
map.on('click', clickHandler);
// 解绑事件
map.off('click', clickHandler);

通过打印事件对象 e 来查看事件都包含什么属性,官方参考手册：地图和覆盖物事件

3、几何计算

3.1、距离、长度、面积

空间数据计算的函数库 AMap.GeometryUtil

3.1.1、计算两点间的实际距离

当需要计算两个地理位置间的实际地面距离时，可以使用静态方法 AMap.GeometryUtil.distance，返回数据以米为单位

var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回 p1 到 p2 间的地面距离，单位：米
var dis = AMap.GeometryUtil.distance(p1, p2);

3.1.2、点到线段的最短距离

当需要计算某一点到线段的最短地面距离时，可以使用静态方法 AMap.GeometryUtil.distanceToSegment，返回数据以米为单位

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回 p0 到线段 p1-p2 的最短地面距离，单位：米
var dis = AMap.GeometryUtil.distanceToSegment(p0, p1, p2);

3.1.3、计算点到路径的最短距离

当需要计算某一点到一段路径的最短地面距离时，可以使用静态方法 AMap.GeometryUtil.distanceToLine，返回数据以米为单位。该方法与上条的区别在于该方法支持多点组成的线段。

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
var p3 = [116.466171, 39.937977];
// 返回 p0 到线段 p1-p2-p3 的最短地面距离，单位：米
var dis = AMap.GeometryUtil.distanceToSegment(p0, [p1, p2, p3]);

3.1.4、计算路径的实际长度

当需要计算某段路径的实际长度时，可以使用静态方法 AMap.GeometryUtil.distanceOfLine，返回数据以米为单位

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回线段 p0-p1-p2 的实际长度，单位：米
var dis = AMap.GeometryUtil.distanceOfLine([p0, p1, p2]);

3.1.5、计算封闭区域的面积

当需要计算指定路径围成的闭合区域面积时，可以使用静态方法 AMap.GeometryUtil.ringArea，返回数据以平方米为单位。

var p0 = [116.450378, 39.947585];
var p1 = [116.434027, 39.941037];
var p2 = [116.461665, 39.941564];
// 返回点 p0-p1-p2 围成的闭合区域面积，单位：平方米
var area = AMap.GeometryUtil.ringArea([p0, p1, p2]);

还有很多其他方法，具体参考官方手册即可:官方色手册

4、服务

4.1、路线规划

路线规划方式有驾车、公交、步行、骑乘和货车等，以驾车规划为例

获取驾车路线规划数据
使用默认UI显示驾车路线详情
使用驾车规划拖拽插件编辑路线
其它路线规划 API

4.1.1、获取驾车路线规划数据

引入 AMap.Driving 插件
使用关键字获取驾车规划数据。
使用默认UI显示驾车路线规划
- 使用AMap.Driving获取驾车路线规划发起搜索后，需要开发者根据返回的路线方案数据结构自行显示路线详情并结合·AMap.Polyline·绘制到地图上。
- 同时高德JS API还提供了默认的UI帮助开发者节省时间、提升效率，自动在地图上显示结构化的路线详情。

<body><div id="container"></div><div id="panel"></div><script>var map = new AMap.Map('container', {zoom: 11, //级别center: [116.397428, 39.90923], //中心点坐标});AMap.plugin('AMap.Driving', function() {var driving = new AMap.Driving({// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式policy: AMap.DrivingPolicy.LEAST_TIME,// map 指定将路线规划方案绘制到对应的AMap.Map对象上map: map,// panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的IDpanel: 'panel'})var points = [{keyword: '北京市地震局（公交站）',city: '北京'}, {keyword: '亦庄文化园（地铁站）',city: '北京'}]// 搜索完成后，将自动绘制路线到地图上driving.search(points);})</script>
</body>

这么做其实只将路线画到了地图上，但是默认的 UI 没有显示，这是因为我们没有给装路线规划的盒子设置样式，这里官方demo有样式设置，并且还引入了几个 js 文件，我们需要默认UI 时直接复制即可。地点关键字+驾车路线规划

new AMap.Driving 的参数如下

属性	类型	描述
map	Map	AMap.Map 对象，展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。
policy	number	驾车路线规划策略
extensions	string	默认值：base，返回基本地址信息。当取值为：all，返回DriveStep基本信息+DriveStep详细信息
panel	string
showTraffic	boolean	设置是否显示实时路况信息，默认设置为true。显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。

官方还提供了其他路线规划，例如货车、公交、步行、骑行等。

4.2、行政区查询

在开发地图产品的时候，经常会有获取某一行政区下所有下级行政区信息的需求。以获取中国所有省份信息为例，

引入插件 AMap.DistrictSearch

AMap.plugin('AMap.DistrictSearch', function () {var districtSearch = new AMap.DistrictSearch({// 关键字对应的行政区级别，country表示国家level: 'country',//  显示下级行政区级数，1表示返回下一级行政区subdistrict: 1})// 搜索所有省/直辖市信息districtSearch.search('中国', function(status, result) {// 查询成功时，result即为对应的行政区信息})
})
// 除了获取所有省份/直辖市信息外，您可以通过修改level和subdistrict并配合search传入对应keyword查询对应信息。

AMap.DistrictSearch 的参数如下

属性	类型	描述
level	string	关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
showbiz	boolean	是否显示商圈，默认值true 可选为true/false，为了能够精准的定位到街道，特别是在快递、物流、送餐等场景下，强烈建议将此设置为false
extensions	string	是否返回行政区边界坐标点，默认值：base，不返回行政区边界坐标点，取值：all，返回完整行政区边界坐标点
subdistrict	number	显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一级，可选值：0、1、2、3，默认值：1 0：不返回下级行政区 1：返回下一级行政区 2：返回下两级行政区 3：返回下三级行政区

这里看官方示例DEMO即可，官方文档其实代码并不支持运行，在官方文档看了基本信息参数等去官方Demo看，其中引入的 css、js
文件我们可以不用管，只要注意看其中的 js 逻辑即可

项目 - Web地图开发【高德地图API】(二)相关推荐

Android 手机地图开发-高德地图问题
高德地图地址:http://code.autonavi.com 示例程序及SDK下载地址如何获取AutoNavi MAP API密钥 AutoNavi提供的地图通过MapView对象进行显示.Map ...
android高德地图自定义地图,(android地图开发) 高德地图自定义对话框
截图效果: 布局文件: android:layout_width="fill_parent" android:layout_height="fill_parent&quo ...
高德离线地图开发 java_自定义地图-创建地图-开发指南-Android 地图SDK | 高德地图API...
简介自 Android 3D 地图 SDK v5.2.0起,高德地图支持使用可视化自定义地图模版改变底图颜色和样式,实现可视化的编辑和控制显示地图元素. 创建样式文件创建地图样式高德地图开放平台 ...
高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...
在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...
arcgis api for js入门开发系列十七在线地图（天地图、百度地图、高德地图）
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...
java 地图控件_控件交互-与地图交互-开发指南-Android 地图SDK | 高德地图API
控件是指浮在地图图面上的一系列用于操作地图的组件,例如缩放按钮.指南针.定位按钮.比例尺等. UiSettings 类用于操控这些控件,以定制自己想要的视图效果.UiSettings 类对象的实例化需 ...
高德地图开发之地图配置及vue上初始化创建地图
开门见山地说,现如今地图相关的开发业务在工作中越来越常见,目前市面上主流的地图开发还是以百度和高德为主,今天就来讲一下高德地图的配置和在vue上的初始化创建,帮助大家更好更快的了解高德地图开发相关的 ...
web页面调起地图APP(高德地图、百度地图、腾讯地图)
web页面调起地图APP(高德地图.百度地图.腾讯地图) 在没有安装APP的情况下可以用web端地图以路线规划为例: 一.腾讯地图 web端官方文档地址:https://lbs.qq.com/we ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
Android项目打包，及高德地图服务配置
前段时间,领导安排了一个Android端功能的任务,开发好了之后问领导打包怎么整,领导也是一脸懵逼,我一个后端开发之前也没实际操作过,于是就百度,由于之前Android开发离职了,打包需要的签名文件也 ...

项目 - Web地图开发【高德地图API】(二)