❤️ 谢谢支持
喜欢的话别忘了 关注、点赞哦~。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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 属性设置图标和文字（也可以缺省）。
- 设置一个图标对象
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’,
};
- 设置文字对象
var text = {
// 要展示的文字内容
content: ‘中邮速递易’,
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
direction: ‘right’,
// 在 direction 基础上的偏移量
offset: [-20, -5],
// 文字样式
style: {
// 字体大小
fontSize: 12,
// 字体颜色
fillColor: ‘#22886f’,
// 描边颜色
strokeColor: ‘#fff’,
// 描边宽度
strokeWidth: 2,
}
};
- 创建 LabelMarker 实例
var labelMarker = new AMap.LabelMarker({
name: ‘标注2’, // 此属性非绘制文字内容，仅最为标识使用
position: [116.466994, 39.984904],
zIndex: 16,
// 将第一步创建的 icon 对象传给 icon 属性
icon: icon,
// 将第二步创建的 text 对象传给 text 属性
text: text,
});
- 创建 LabelsLayer
LabelsLayer 图层是承载 LabelMarker 的图层，所有创建的 LabelMarker 需要添加到 LabelsLayer 图层上才能最终展示在地图上。
var labelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
// 该层内标注是否避让
collision: true,
// 设置 allowCollision：true，可以让标注避让用户的标注
allowCollision: true,
});
- 将已创建的 LabelMarker 添加到 LabelsLayer 上
// 添加一个 labelMarker
labelsLayer.add(labelMarker);
- 将 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 点：
Document 线，面的添加方式同上。只要将 marker 方法替换成相应的线 mousetool.polyline(); 或者面 mousetool.polygon(); 方法即可。
- 获取通过 AMap.MouseTool 绘制的点、线、面覆盖物的位置/范围/路径。
使用鼠标工具绘制的点、折线、多边形、圆形、矩形等覆盖物，都可以通过多边形覆盖物自身的方法，获取到位置/范围/路径。此处以多边形为例，阐述获取相应信息的方式
- 鼠标工具除可以绘制多种覆盖物以外，还可以进行距离量测、面积量测、拉框放大、拉框缩小等操作。
以下以距离量测模式为例介绍。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作
//通过插件方式引入 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、使用官方地图样式
设置地图样式的方式有两种：
- 在地图初始化时设置：
var map = new AMap.Map(‘container’,{
mapStyle: ‘amap://styles/whitesmoke’, //设置地图的显示样式
});
- 地图创建之后使用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、自定义地图
- 自定义地图平台
总结:
-
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；
-
它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；
我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。
理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；
所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；
式
});
- 地图创建之后使用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、自定义地图
- 自定义地图平台
总结:
-
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；
-
它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；
我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。
理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；
所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；
-
- 官方参考手册：MouseTool
-
- 异步加载插件
-
-