vue使用google地图（三）在地图上使用drawingManager绘图，并获取坐标

最新推荐文章于 2023-06-30 18:43:23 发布

Dreamer_xr

最新推荐文章于 2023-06-30 18:43:23 发布

阅读量4.7k

点赞数 3

分类专栏： Vue 文章标签： google drawingManager 绘图 vue

本文链接：https://blog.csdn.net/xr510002594/article/details/86627347

版权

本文介绍了如何在Vue项目中利用Google Maps的drawingManager组件根据接口返回的坐标数据绘制地图区域。需要注意的是，绘图时首尾坐标必须相同，且Google Maps API目前未提供删除已绘制区域的直接方法，因此采取了重置地图的解决方案。参考了官方文档：[DrawingManagerOptions.circleOptions](https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManagerOptions.circleOptions) 和 [drawinglayer概述](https://developers.google.com/maps/documentation/javascript/drawinglayer#overview)。

摘要由CSDN通过智能技术生成

先放需求图

我这个需求是先通过接口获取已有区域，也就是红色框框的区域，通过坐标进行绘图，下面是我拿到的数据格式

有个重要的一点，画图的坐标，第一个点一定要和最后一个点是相同的坐标，否则就会出错。

//显示区域
      drawArea(list) {
        // console.clear()
        for (let e in list) {
          let arr = []
          list[e].map(ele => {
            arr.push({
              lat: ele.rangeLatitude,
              lng: ele.rangeLongitude,
            })
          })
           //arr为遍历出来的坐标数组，先for...in遍历对象，再遍历数组
          let bermudaTriangle = new google.maps.Polygon({
            paths: arr,
            strokeColor: '