Web前端最新【高德地图API】Web地图开发系列(一)，带你全面解析前端框架体系架构view篇

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

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

icon:‘xxx.png’,

});

map.add(marker);

2.3.3、像素尺寸AMap.Size

• 像素尺寸由width和height两个分量构成，通常用来描述具有一定大小的对象，比如地图的尺寸，图标的尺寸等

var mapSize = map.getSize();//获取地图大小，返回的是地图容器的像素大小

var width = mapSize.width; //地图容器像素宽

var height = mapSize.height;//地图容器像素高

2.3.4、经纬度矩形边界AMap.Bounds

• 经纬度矩形边界为一个矩形的经纬度范围，用西南角和东北角的两个经纬度来描述，这两个经纬度分别代表边界的最小值和最大值。

• 矩形经纬度边界通常用来描述：地图的当前边界、覆盖物的外包矩形边界、图片图层的覆盖范围等。

• 比如构造一个新的Bounds对象来调成地图的边界范围：

var southWest = new AMap.LngLat(110,20); // 西南角经纬度

var northEast = new AMap.LngLat(120,30); // 东北角经纬度值

var bounds = new AMap.Bounds(southWest, northEast);

map.setBounds(bounds);

3、覆盖物

=======================================================================

3.1、标记

---

3.1.1、点标记

官方参考手册：https://lbs.amap.com/api/jsapi-v2/documentation#marker

// 构造点标记

var marker = new AMap.Marker({

map: map, // 要显示该 marker 的地图对象

icon: “https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png”,

position: [116.405467, 39.907761], // 点标记在地图上显示的位置

title: ‘Hello’, // 鼠标滑过点标记时的文字提示

visible: true, // 点标记是否可见，默认值：true

draggable: true, // 点标记是否可以拖拽移动,默认为false

cursor: ‘pointer’ // 指定鼠标悬停时的鼠

});

// 将点标记添加到地图上

map.add(marker);

// 移除已创建的 marker

map.remove(marker);

3.1.2、圆形标记CircleMarker

官方参考手册：https://lbs.amap.com/api/javascript-api/reference/overlay#circlemarker

// 构造圆形标记

var CircleMarker = new AMap.CircleMarker({

map:map, // 要显示该 CircleMarker 的地图对象

center: [116.397428, 39.90923],//圆心位置

radius: 5, //圆点半径,单位px

strokeColor: ‘#006600’, //线条颜色，使用16进制颜色代码赋值。默认值为#006600

strokeOpactiy: 0.9, //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9

strokeWeight: 5, //轮廓线宽度

fillColor: ‘#006600’, //圆形填充颜色,使用16进制颜色代码赋值。默认值为#006600

fillOpacity: 0.9, //圆形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9

})

// 将圆形标记添加到地图上

map.add(CircleMarker);

3.1.3、文本标记Text

官方参考手册：https://lbs.amap.com/api/javascript-api/reference/overlay#text

// 构造文本标记

var text = new AMap.Text({

map:map, // 要显示该 CircleMarker 的地图对象

text: ‘Hello’,//标记显示的文本内容

position: [116.397428, 39.90923],//点标记在地图上显示的位置，默认为地图中心点

})

// 将文本标记添加到地图上

map.add(text);

3.1.4、海量标记LabelMarker

创建一个标注对象，首先要设置标注的位置，同时还可以通过 icon 和 text 属性设置图标和文字（也可以缺省）。

1. 设置一个图标对象

var icon = {

// 图标类型，现阶段只支持 image 类型

type: ‘image’,

// 图片 url

image: ‘https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png’,

// 图片尺寸

size: [64, 30],

// 图片相对 position 的锚点，默认为 bottom-center

anchor: ‘center’,

};

2. 设置文字对象

var text = {

// 要展示的文字内容

content: ‘中邮速递易’,

// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置

direction: ‘right’,

// 在 direction 基础上的偏移量

offset: [-20, -5],

// 文字样式

style: {

// 字体大小

fontSize: 12,

// 字体颜色

fillColor: ‘#22886f’,

// 描边颜色

strokeColor: ‘#fff’,

// 描边宽度

strokeWidth: 2,

}

};

3. 创建 LabelMarker 实例

var labelMarker = new AMap.LabelMarker({

name: ‘标注2’, // 此属性非绘制文字内容，仅最为标识使用

position: [116.466994, 39.984904],

zIndex: 16,

// 将第一步创建的 icon 对象传给 icon 属性

icon: icon,

// 将第二步创建的 text 对象传给 text 属性

text: text,

});

4. 创建 LabelsLayer

LabelsLayer 图层是承载 LabelMarker 的图层，所有创建的 LabelMarker 需要添加到 LabelsLayer 图层上才能最终展示在地图上。

var labelsLayer = new AMap.LabelsLayer({

zooms: [3, 20],

zIndex: 1000,

// 该层内标注是否避让

collision: true,

// 设置 allowCollision：true，可以让标注避让用户的标注

allowCollision: true,

});

5. 将已创建的 LabelMarker 添加到 LabelsLayer 上

// 添加一个 labelMarker

labelsLayer.add(labelMarker);

6. 将 LabelsLayer 添加到地图实例

map.add(labelsLayer);

3.2、矢量图形

---

官方参考手册：https://lbs.amap.com/api/jsapi-v2/documentation#circle

// 构造矢量圆形

var circle = new AMap.Circle({

center: new AMap.LngLat(“116.403322”, “39.920255”), // 圆心位置

radius: 1000, //半径,单位米

strokeColor: “#F33”, //线颜色

strokeOpacity: 1, //线透明度

strokeWeight: 3, //线粗细度

fillColor: “#ee2200”, //填充颜色

fillOpacity: 0.35, //填充透明度,取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5

strokeStyle: ‘solid’,//轮廓线样式，实线:solid，虚线:dashed

});

// add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上

map.add([marker,circle]);

当然除了圆形，还有其他：

• 折线 Polyline

• 多边形 Polygon

• 矩形 Rectangle

• 椭圆覆盖物 Ellipse

官方文档矢量图形：https://lbs.amap.com/api/jsapi-v2/guide/overlays/vector-overlay

3.2.1、折线

这里举一个折线的例子，具体还是得翻阅官方文档。

// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象

var path = [

new AMap.LngLat(116.368904, 39.913423),

new AMap.LngLat(116.382122, 39.901176),

new AMap.LngLat(116.387271, 39.912501),

new AMap.LngLat(116.398258, 39.904600)

];

// 创建折线实例

var polyline = new AMap.Polyline({

path: path,

borderWeight: 2, // 线条宽度，默认为 1

strokeColor: ‘red’, // 线条颜色

lineJoin: ‘round’ // 折线拐点连接处样式

});

// 将折线添加至地图实例

map.add(polyline);

3.3、编辑矢量图形

---

3.3.1、插件的使用

• 官方文档：插件的使用

• JS API 提供了众多的插件功能，这些功能不会主动随着 JSAPI 主体资源下发，需要引入之后才能使用这些插件的功能。

使用插件的功能通常需要三个步骤：

①引入插件

引入插件，支持按需异步加载和同步加载，可同时引入多个插件

• 异步加载插件

异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。

②异步加载多个插件

AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。

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

var toolbar = new AMap.ToolBar();

map.addControl(toolbar);

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

driving.search(/参数/)

});

③同步预加载插件

如果您希望和 JS API 的主体同步加载某些插件，而不是异步加载，可以在 JS API 的入口地址中添加plugin参数，将需要使用的一个或者多个插件的名称作为参数即可，这种用法在 JS API 加载完毕之后便可直接使用插件功能了。

④同步预加载多个插件

需要加载多个插件时，plugin参数中的插件名称之间以逗号分割。

⑤插件列表

• 插件列表

• 参考手册

根据上述插件列表和参考手册，我们配合使用，可以使用很多插件

3.3.2、鼠标工具MouseTool

• 官方参考手册：MouseTool

MouseTool 插件主要通过用户在地图图面的鼠标操作，绘制相应的点、线、面覆盖物.

例如：通过 AMap.MouseTool 工具，在图面添加默认样式的 Marker 点：

线，面的添加方式同上。只要将 marker 方法替换成相应的线 mousetool.polyline(); 或者面 mousetool.polygon(); 方法即可。

2. 获取通过 AMap.MouseTool 绘制的点、线、面覆盖物的位置/范围/路径。

使用鼠标工具绘制的点、折线、多边形、圆形、矩形等覆盖物，都可以通过多边形覆盖物自身的方法，获取到位置/范围/路径。此处以多边形为例，阐述获取相应信息的方式

3. 鼠标工具除可以绘制多种覆盖物以外，还可以进行距离量测、面积量测、拉框放大、拉框缩小等操作。

以下以距离量测模式为例介绍。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作

//通过插件方式引入 AMap.MouseTool 工具

map.plugin([“AMap.MouseTool”], function() {

//在地图中添加MouseTool插件

var distanceTool = new AMap. AMap.MouseTool(map);

//测量

distanceTool.rule();

});

3.4、信息窗口InfoWindow

---

3.4.1、默认信息窗体

默认信息窗体封装了关闭按钮，使用 API 默认的信息窗体样式，这个时候只需要对 InfoWindow 设定 content 属性即可，

• content 可以是 dom 对象，也可以是 html 识别的字符串

• 通过 anchor 可以方便的设置锚点方位

• top-left

• top-center

• top-right

• middle-left

• center

• …

var infoWindow = new AMap.InfoWindow({

anchor: ‘top-left’,

content: ‘这是信息窗体！’,

});

infoWindow.open(map,[116.401337,39.907886]);

3.4.2、自定义窗体

• 如果要自定义信息窗体内容，只需把 InfoWindow 的 isCustom 属性设置为 true ，信息窗体就会变成自定义信息窗体。

• 与默认信息窗体的不同在于，自定义信息窗体需要自己通过 content 来实现关闭按钮以及全部外观样式，同时需要通过 offset 指定锚点位置，offset 为相对于 content 下边缘中间点的位移

// 创建 infoWindow 实例

var infoWindow = new AMap.InfoWindow({

isCustom: true, //使用自定义窗体

content: “这是信息窗体”, //传入 dom 对象，或者 html 字符串

offset: new AMap.Pixel(16, -50)

});

infoWindow.open(map, [116.401337, 39.907886]);

注意：这里的官方demo更具体

3.5、右键菜单ContextMenu

---

var contextMenu = new AMap.ContextMenu({

isCustom: true,

content: “右键菜单”

});

map.on(‘rightclick’, function(e) {

console.log(e); // 可以打印出事件对象 e 来查看下面的 lnglat

contextMenu.open(map, e.lnglat);

});

注意：这里的官方demo更具体

4、自定义地图

=========================================================================

4.1、使用官方地图样式

---

设置地图样式的方式有两种：

1. 在地图初始化时设置：

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

mapStyle: ‘amap://styles/whitesmoke’, //设置地图的显示样式

});

2. 地图创建之后使用Map对象的setMapStyle方法来修改

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

zoom: 11, //级别

center: [116.397428, 39.90923], //中心点坐标

viewMode: ‘2D’, //使用3D视图

});

map.setMapStyle(‘amap://styles/whitesmoke’);

4.2、自定义地图

---

1. 自定义地图平台

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

式

});

2. 地图创建之后使用Map对象的setMapStyle方法来修改

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

zoom: 11, //级别

center: [116.397428, 39.90923], //中心点坐标

viewMode: ‘2D’, //使用3D视图

});

map.setMapStyle(‘amap://styles/whitesmoke’);

4.2、自定义地图

---

1. 自定义地图平台

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；