高德地图初使用手记

前言

本文作为笔者初上手地图类需求开发的小记,没有深入的探讨,仅包含了一些初级API使用的记录与一些萌新踩坑的总结

需求简述

产品给提了一个需求,需要用到高德地图组件将一组或多组经纬度坐标在地图中描绘出来,同时会有一系列的交互上的设计,功能整体而言其实不多——一个地图加一个列表,需要在地图上绘制多个多边形,列表里的每一条记录会对应一个描点,鼠标覆盖某一记录时描点高亮,反之亦然。

前期准备

将页面整体分为两个部分:
1、地图
2、列表:用绝对定位的方式在页面上布局,确定列表的位置。

地图处理:
由需求而言,在地图上的处理其实仅需增加多边形、描点、信息窗体即可,交互上大量调用API和使用监听事件。

资料:
高德地图:WebAPI概述
高德地图:覆盖物
高德地图:信息窗体

组件引入

项目中已有类似的例子,所以插件引入方面投入工作量基本为零直接“上手开发”。 通过npm安装或JS引入项目的方式,引入高德地图插件。

加载地图

由准备中的计划,页面上放一个指定ID的容器用作加载地图,通过样式控制容器的宽高,在实例化地图时,传入这个ID,同时设置地图的中心点,缩放层级zoom等属性。

var map = new AMap.Map('ID', { 
    // 地图中心位置,(用了官网示例的地址)
    center:[117.000923,36.675807], 
    // 缩放级别,是一个范围,2.0版本貌似扩展到 2-20
    zoom:11,
    // ...
});
 
 // 挂到上下文里去更方便使用 this.map = XXX;
加载多边形

调用高德提供的API,将后端同学提供的经纬度直接绘制到地图上。

let polygon = new AMap.Polygon({
    // 路径是一个二维数组;
    path: [[lng, lat], ...],
    // 样式的基本设置;
    ...
    // 冒泡到地图上:默认false,Boolean类型;
    bubble: false,
    // 地图实例:之前创建的地图实例,this.map;
    map: this.map,
    // 用户自定义类型,Any;
    extData: {
        // 个人觉得这一属性太有用了...
    },
});
描点Marker&信息窗体infoWindow

太少写类似的笔记了,感觉都写的跟搬官网的似的,实例化过程就试着不记载了吧,挂一下官网的覆盖类文档——高德地图:覆盖类

开发过程小记

咋一看需求不多,好像就两个功能点,但实现起来确实花了不少脑子,有走弯路,好在文档很全面,耐心看,某个属性就能帮忙解决棘手的问题。

自定义属性extData

地图上的覆盖物实在太多了,一个多边形N个描点,一个描点一个信息窗体,想要方便快捷获取对应的数据,在实例化覆盖物对象时,就将对应的自定义信息捆绑,找到覆盖物就能拿到想要的信息,不必再额外想办法去存取。

// 获取自定义信息
map.getExtData();

// 设置自定义信息
map.setExtData()

当然这主要是在引用的时候进行操作,在实例化的时候就可以挂到extData属性下面,多边形、描点都有这个属性,或者说覆盖物都有这个属性。

let polygon = new AMap.Polygon({
    ...
    extData: {
         // Any类型
    },
    ...
});
取某一个覆盖物

目前想到的方法是取某一类的覆盖物,再从自定义属性里去查询,这么做是因为恰好,在需求里多边形有一个对应唯一的ID,描点也有一个独立的唯一的ID,同样信息窗体也是。再遇到非此类情况的再想办法吧……覆盖物实例里有一个自己的ID,用这个ID去查询也是一个好办法吧。

/* 
* 括号内不传参的话,会获取全部的覆盖物,可以传入一个类型
* 参数类型是字符串,如多边形、描点等
*/
this.map.getAllOverLays();

/**
* 返回的值是一个数组,可以用for循环遍历
* 遍历过程中就可以去查特定的一个覆盖物
*/
this.map.getAllOverLays().forEach( map => {
    if (map.getExtData().extData === "") {
        // do ...
    }
});

/**
* 注意获取额外信息时,类型是任意的,取值方式留意一下
*/
移除覆盖物
获取覆盖物经纬度
判断是否点在当前多边形内
LngLat类
SetFitView的使用
地图自己的插件
挖坑记录
事件监听的绑定与移除
及时更新自定义的数据
信息窗体的样式名
暂存

时间太晚了,没写完的留着后面填,现在该躺了,周末还自发加了两天班,哭泣泣。。。


笔者:Scc
GitHub:Young(反正是家徒四壁)
2020-07-12 深夜

你可能感兴趣的:(react.js,高德地图,前端)