1、背景
由于本人平常高德地图用的不多,头一次做一些高德地图路线规划、点聚合、地图Marker等操作,到现在还用的不是很熟练,遂决定简单记录一下,方便以后使用了可以过来看。
2、高德地图API
参考链接:
地图API示例:细线 ThinLine-线 Line-示例中心-JS API 示例 | 高德地图API
地图覆盖物文档:覆盖物-参考手册-地图 JS API | 高德地图API
信息窗体示例:默认样式信息窗体-信息窗体-示例中心-JS API 示例 | 高德地图API
3、使用心得
地图初始化
首先高德要有一个基准路径:'https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key值&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.DistrictLayer,AMap.MarkerClusterer(这些都是使用高德的API名称)'
设置一个具有宽高的地图容器后,使用
new AMap.Map('地图容器ID', {
zoom: 12 , //级别
center: [lng, lat], // 中心点坐标 : 经纬度
viewMode: '3D', //使用3D视图
zooms: [3, 16], //设置地图级别范围
mapStyle: 'amap://styles/xxxxxxxxxxxxxxx', // 自定义地图主题色
});
此处声明地图保存在自己创建的变量 mapRef 中,然后封装了获取地图示例的方法,每次调用返回当前地图对象,以调用其他API。
标准样式主题-自定义地图样式-示例中心-JS API 示例 | 高德地图API 主题色可以使用官方提供的几种主题,也可以自己进行模块颜色配置,自定义主题。
地图中几个常用方法
1、地图描线 -- Polyline
解释一下代码底部的
setZoomAndCenter(缩放级别,中心点数组) -- 改变地图中心点及缩放级别
多配合与地图中的切换使用,切换场景时自动定位到该场景的中心
如图所示,高德地图提供的描线方法为
AMap.Polyline(opt:PolylineOptions) -- 构造折线对象,通过PolylineOptions指定折线样式
其中:
map: 当前地图实例对象
path:lines:Array,注意,该数据格式必须是[[lng1,lat1],[lng2,lat2],[lng3,lat3].....],即数组包数组的格式,里面每个数组都是一组经纬度组成,以此会画成一条线。
strokeWeight:Number 线条宽度,单位:像素
strokeColor:String 线条颜色,使用16进制颜色代码赋值。默认值为#006600
如代码最后所示,此方法会返回 line (这条线的示例对象),于是在其他文件调用时,可以用一个变量来接收,然后通过 line.on('click',()=>{代码体}) 来为此线段绑定点击事件。
此处只简单介绍常用的属性,及说明最重要的 path 属性数据结构,详情移步:
覆盖物-参考手册-地图 JS API | 高德地图API -- Polyline
2、信息窗体 -- InfoWindow
如图所示,高德地图中信息窗体所使用的 Content 都是元素字符串,写起来稍微有些费劲.
AMap.InfoWindow(opt:PolylineOptionsInfoWindowOptionsPolylineOptions) -- 构造详细信息展示窗体。
isCustom : 是否自定义窗体。设为true时,信息窗体外框及内容完全按照content所设的值添加(默认为false,即在系统默认的信息窗体外框中显示content内容)
autoMove:是否自动调整窗体到视野内(当信息窗体超出视野范围时,通过该属性设置是否自动平移地图,使信息窗体完全显示)
closeWhenClickMap:控制是否在鼠标点击地图后关闭信息窗体,默认false,鼠标点击地图后不关闭信息窗体
content:显示内容,可以是HTML要素字符串或者HTMLElement对象
anchor:信息窗体锚点。
offset:信息窗体显示位置偏移量。默认基准点为信息窗体的底部中心。
此处只简单介绍常用的属性,详情移步:
但注意,写成 html 字符串,无法很好的去为元素添加点击事件,如果只有一行的代码逻辑体,可以直接写在 htmlString 中,如图
但如果结构体比较多时,有两种方案
方案1:事件委托:通过e.target找到你绑定的具体id,书写逻辑
document.querySelector('body').addEventListener('click', function (e) {
if (e.target.getAttribute('id') == 'closeBtn') {
iw.close();
}
});
方案2:在生命周期中给Window事先注册事件,再将事件传给 ts 文件(htmlString)。
在window对象上注册函数,并在同文件声明这个函数
声明函数
3、点聚合 -- MarkerClusterer 插件
点聚合是一个比较复杂的功能,可以在地图缩放很小时将地图画的点聚合在一起,点击时再放大,这里需要用到高德的工具类 - MarkerClusterer 插件
文档:工具类-参考手册-地图 JS API | 高德地图API
示例:点聚合-点标记-示例中心-JS API 示例 | 高德地图API
过程:
1>首先,地图描点添加 Marker 我使用的是某个图片,需要用到 AMap.Icon(),如下图所示
size: 图标尺寸,默认值(36,36) //类型为高德提供的Size类型,下面会放链接
imageOffset: 图标取图偏移量。当image中指定了一个大图时,可通过size和imageOffset配合,显示图标的指定范围 //类型为高德提供的Pixel类型,下面会放链接
image: 图标的取图地址。默认为蓝色图钉图片 // String 可以直接导入
imageSize:图标所用图片大小,根据所设置的大小拉伸或压缩图片,等同于CSS中的background-size属性。可用于实现高清屏的高清效果
文档地址:覆盖物-参考手册-地图 JS API | 高德地图API
2>这样,我们就成功的将你想在地图上展示的图标生成好了,下一步为地图添加覆盖物:
position: 点标记在地图上显示的位置,默认为地图中心点
icon:需在点标记中显示的图标。可以是一个本地图标地址,或者Icon对象。有合法的content内容时,此属性无效
label:结构为 {content,offset,direction} content 为文本标注的内容。direction 为文本标注方位。offset 为偏移量(默认基准点为图标左上角)
angle:点标记的旋转角度,广泛用于改变车辆行驶方向
文档地址:覆盖物-参考手册-地图 JS API | 高德地图API
3>生成覆盖物之后,还可以直接在当前给该覆盖物添加点击事件。(上述写的方式是将线段对象放回,通过on添加,此处是第二种方式,如下图)。
4>循环添加覆盖物,生成一个数组 调用MarkerClusterer方法
AMap.plugin('AMap.MarkerClusterer', () => {
new AMap.MarkerClusterer(mapInstance, firePoint.value, {
gridSize: 80,
maxZoom: 12,
minClusterSize: 1,
});
});
注意 由于 AMap.MarkerClusterer 是一个插件方法,在调用时必须加上
AMap.plugin('AMap.MarkerClusterer', () => { 代码体 });
否则会报错:MarkerClusterer is undefined
具体属性参考文档:工具类-参考手册-地图 JS API | 高德地图API
先写到这里,后续继续补充.....