高德地图仿‘地理围栏’+自定义绘制+自定义标记+判断位置和区域关系

背景

还是先说一下这次任务的背景，收到客户的任务需求是这样的：

1. 客户有一份表格，主要内容列是这样得三列 ‘城市名称’、‘片区名称’、‘片区范围’，
   其中城市名称就是 像 青岛市、天津市这种，
   片区名称，就是 像‘青岛自由贸易区’这种；
   片区范围，给出的是一个‘四至范围’，就是 东到 海南岛路，西到江山中路，南到胶州湾海峡，北到团结路这种；
   
2. 客户还有另外一份表格，主要列名是，‘城市名称‘，‘企业名称’，‘企业地址’，‘地址经纬度’
3. 客户最终想要的是两个东西，客户的原话是这样的【整个工作是：我先需要把这个地区在地图上圈出来⭕️，然后我有一套全国企业的位置数据，需要进一步把企业在地图上也标记出来，然后看哪些企业是在这些圈圈里的赋值为1，哪些企业不是在⭕️里的就赋值为0】
   解读出来就是
   第一，这个城市，这个片区在地图上，根据他的四至范围框选展示出来，类似这样：
   第二，这个城市的企业，根据企业的地址经纬度，要在这个地图山 标记出来，类似这样：
   第三，根据这个片区在这个城市的范围，判断这个城市的企业是不是在这个范围内，最终要整理到表格中。

思路

当我看到这个任务的时候，我的第一反应就是 ‘地理围栏’，因为之前的工作中遇到过地理围栏的需求，但是当时我是作为产品人员去设计，并不是直接开发人员，所以对这个地理围栏的详细实现内容了解的并不多。

我先去查了百度地图和高德地图，我发现这两个开发者平台上，对地理围栏的描述都是确定一个中心点，然后给定一个半径，再去绘制一个圆形区域，很显然这并不是我想要的。

然后去和做前端的同事沟通，告诉我现在的地图开放平台都可以 根据地点去自由绘制区域，标记功能也是最普通的功能，我觉得这就是我要的东西，也就是我的解决问题方向。

实现

百度地图

前端同事给了我一个百度地图开放平台示例中心的链接 open | 百度地图API SDK，在这里可以根据自己的想法 直接去调试页面，我先找到可以绘制区域的 api：

果然是这里，可以根据 区域的经纬度集合去绘制一个‘面’。

然后继续找绘制标记物的api：

现在把这两个api 融合到一个页面，那问题应该就可以解决了，于是我把两个代码整合到一个页面中，最终展示效果就是：

既有区域的覆盖面积，也有标记点展示。按照当前这种情况，客户的前两项需求就算完成了，顺利的话后边的需求解决起来应该也不难。

意外

果然事情不会进展的那么顺