高德地图初使用手记

前言

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

需求简述

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

前期准备

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

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

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

组件引入

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

加载地图

由准备中的计划，页面上放一个指定ID的容器用作加载地图，