VUE调用高德地图之电子围栏

之前用VUE实现了高德地图的历史轨迹回放和热力图,现在来实现电子围栏功能。
所谓电子围栏,就是地图上限定的区域内实现限行功能,用我们身边的事物来举例,共享单车的限行、限停区域就是电子围栏。由此可见,电子围栏最基础的做法就是在地图上实现多边形覆盖物。

照例,第一步:加载JS AP

  • 在public/index.html中加入:

  • 放置地图极控制功能
    VUE调用高德地图之电子围栏_第1张图片
  • 初始化地图
    VUE调用高德地图之电子围栏_第2张图片
  • 绘制多边形
    VUE调用高德地图之电子围栏_第3张图片
    如果需要一次绘制多个矢量图形,可以删除__this.mouseTool.close()这一行,并在“结束并保存”按钮功能里实现。

其余函数功能的实现,参见完整代码:






启动项目,一切正常!

你可能感兴趣的:(vue,vue,高德地图)