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

❤️ 谢谢支持

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

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

前端校招面试题精编解析大全

icon:‘xxx.png’,

});

map.add(marker);

2.3.3、像素尺寸AMap.Size

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

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’,

};

  1. 设置文字对象

var text = {

// 要展示的文字内容

content: ‘中邮速递易’,

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

direction: ‘right’,

// 在 direction 基础上的偏移量

offset: [-20, -5],

// 文字样式

style: {

// 字体大小

fontSize: 12,

// 字体颜色

fillColor: ‘#22886f’,

// 描边颜色

strokeColor: ‘#fff’,

// 描边宽度

strokeWidth: 2,

}

};

  1. 创建 LabelMarker 实例

var labelMarker = new AMap.LabelMarker({

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

position: [116.466994, 39.984904],

zIndex: 16,

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

icon: icon,

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

text: text,

});

  1. 创建 LabelsLayer

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

var labelsLayer = new AMap.LabelsLayer({

zooms: [3, 20],

zIndex: 1000,

// 该层内标注是否避让

collision: true,

// 设置 allowCollision:true,可以让标注避让用户的标注

allowCollision: true,

});

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

// 添加一个 labelMarker

labelsLayer.add(labelMarker);

  1. 将 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 插件主要通过用户在地图图面的鼠标操作,绘制相应的点、线、面覆盖物.

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

Document

在这里插入图片描述

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

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

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

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

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

//通过插件方式引入 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’, //设置地图的显示样式

});

  1. 地图创建之后使用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:

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

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

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

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

});

  1. 地图创建之后使用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:

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

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

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

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

  • 12
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 高德地图API是一套提供地理信息服务的应用程序接口,可以用于在Web应用中实现各种功能。以下是几种使用高德地图API实现的功能: 1. 地图展示:可以使用高德地图APIWeb页面上显示地图,包括不同级别的地图缩放、地图拖拽、地图标注等功能。用户可以通过地图展示来了解地理位置、道路交通情况等信息。 2. 路径规划:高德地图API提供了路径规划功能,可以根据起点和终点的经纬度信息,计算出最优的行车路径。用户可以在Web应用中实现路径规划功能,帮助用户规划出行路线。 3. 地理编码:通过高德地图API的地理编码功能,可以将具体的地址转换为经纬度的坐标。在Web应用中,用户可以通过输入地址,获取相应的经纬度坐标,实现地理位置定位等功能。 4. 逆地理编码:逆地理编码功能与地理编码相反,可以将经纬度坐标转换为具体的地址信息。在Web应用中,可以将用户的当前位置的经纬度信息通过逆地理编码,得到具体的位置地址,并进行展示。 5. 周边搜索:高德地图API还提供了周边搜索功能,可以根据指定的关键字和范围,在地图上查找特定类别的POI(兴趣点)。在Web应用中,用户可以根据自己的需求,搜索周边的商铺、餐馆、景点等信息。 综上所述,通过使用高德地图API,可以在Web应用中实现地图展示、路径规划、地理编码与逆地理编码、周边搜索等功能,为用户提供更好的地理信息服务。 ### 回答2: 使用高德地图API可以实现很多功能,例如地图展示、地点搜索、路径规划、定位等。 首先,我们可以通过高德地图API在网页上展示地图。通过简单的前端代码,将地图嵌入到网页中,用户可以在页面上与地图交互,拖动、缩放等操作都可以实现。 其次,高德地图API还提供了地点搜索功能。用户可以在网页上输入感兴趣的地点名称或关键词,通过API发送请求,获取相关的地点信息,如名称、位置、电话、评分等。这可以应用于各种场景,比如旅游网站可以根据用户搜索的关键字显示相关的景点信息。 另外,高德地图API还可以实现路径规划。用户可以在网页上选择起点和终点,然后通过API发送请求,获取最优的路线信息,包括步行、驾车、骑行等不同的交通方式的路线规划。这使得用户可以根据自己的需求选择最合适的出行方式。 最后,高德地图API还支持定位功能。用户可以在网页中获取自己的位置信息,无论是经纬度还是城市名称,都可以通过API获取到准确的位置信息。这可以应用于很多场景,比如外卖平台可以根据用户位置信息快速定位附近的餐馆。 总之,使用高德地图API可以实现许多有趣和实用的功能,在网页中展示地图、进行地点搜索、路径规划和定位等等,可以满足不同需求的开发者和用户的使用。 ### 回答3: 使用高德地图API,可以实现许多与地图相关的功能。首先,在Web应用程序中,可以使用高德地图API实现地图的展示和交互功能。通过调用API提供的接口,开发者可以在网页上显示地图,并进行缩放、平移和旋转等常用操作。 其次,高德地图API还可以实现地图搜索功能。通过调用搜索接口,用户可以在地图上搜索特定的地点或地点附近的POI,如餐馆、商店、公园等。搜索结果可以以列表或标注的形式展示在地图上,并提供详细的信息窗口。 除了基本的地图展示和搜索功能,高德地图API还可以实现导航功能。通过调用导航接口,用户可以实时获取最佳的路径规划,并在地图上展示导航线路。同时,API还提供实时交通信息的获取,用户可以通过API获取道路的实时拥堵情况,并在导航中进行动态路线规划。 此外,高德地图API还支持地图数据的可视化展示。开发者可以通过调用数据可视化接口,将自定义数据以图层的方式叠加在地图上,以呈现更丰富的视觉效果,例如展示热力图、点聚合等。 最后,高德地图API还提供了地图的定位和定位周边功能。通过调用定位接口,可以获取用户的地理位置信息,并在地图上显示当前位置。同时,还可以调用周边搜索接口,获取用户当前位置附近的POI信息。 综上所述,通过高德地图API,可以实现地图展示、搜索、导航、数据可视化和定位等多种功能,为Web应用程序提供强大的地图服务。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值