高德地图API的一些使用心得

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：信息窗体显示位置偏移量。默认基准点为信息窗体的底部中心。

此处只简单介绍常用的属性，详情移步：

信息窗体-参考手册-地图 JS API | 高德地图API

但注意，写成 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

先写到这里，后续继续补充.....