2024年最新【高德地图API】Web地图开发系列(二)，2024年最新面试题分享网站

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

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、简易行政区图

---

1. 世界简易行政区图层AMap.DistrictLayer.World

2. 国家简易行政区图层 AMap.DistrictLayer.Country

3. 省市简易行政区图层 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、路线规划

---

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

1. 获取驾车路线规划数据

2. 使用默认UI显示驾车路线详情

3. 使用驾车规划拖拽插件编辑路线

4. 其它路线规划 API

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

1. 引入 AMap.Driving 插件

2. 使用关键字获取驾车规划数据。

3. 使用默认UI显示驾车路线规划

• 使用AMap.Driving获取驾车路线规划发起搜索后，需要开发者根据返回的路线方案数据结构自行显示路线详情并结合AMap.Polyline绘制到地图上。

• 同时高德JS API还提供了默认的UI帮助开发者节省时间、提升效率，自动在地图上显示结构化的路线详情。