时间戳

首页 > 解决方案 > 如何在点击时突出显示谷歌地图多边形边界？

angular - 如何在点击时突出显示谷歌地图多边形边界？

问题描述

我在角度使用 Google Map API JS，我在地图上显示多个多边形，我想在单击多边形时突出显示多边形的边界，但它只突出显示唯一的最后一个多边形。在下面我分享 Stackblitz URL 以供参考

演示：Stackblitz

请在这些问题上帮助我。

提前致谢

标签： angulartypescriptmaps

解决方案

你必须给整个地图点击事件并使用局部变量

  drawPolygon() {
    this.map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 64.79728743642762, lng: -150.995535452303 },
      zoom: 7
    });
    // create empty array
    // we will fill in all the polygons created in this array
    let polygonArray = [];

    this.polygons.filter((data: any) => {
      data.data.filter((res: any) => {
        // create new polygon
        let polygonsMap = new google.maps.Polygon({
          map: this.map,
          paths: res.polygons,
          strokeColor: '#FF8C00',
          fillColor: '#FF8C00',
          strokeOpacity: 0.8,
          strokeWeight: 2
        });
        polygonsMap.setMap(this.map);

        // add event listener
        google.maps.event.addListener(polygonsMap, 'click', function(event) {
          //all polygons are reset before painting the clicked polygon
          for (let i in polygonArray) {
            polygonArray[i].setOptions({ fillColor: '#FF8C00' });
            polygonArray[i].setOptions({ strokeColor: '#FF8C00' });
          }

          // clicked polygon paint
          polygonsMap.setOptions({ fillColor: '#000' });
          polygonsMap.setOptions({ strokeColor: '#000' });
        });

        // push to polygonArray
        polygonArray.push(polygonsMap);
      });
    });

    // Show polyogon array
    console.log('polygonArray', polygonArray);
  }

工作演示：https ://stackblitz.com/edit/angular-draw-polygon-google-maps-du2yeq?file=app/app.component.ts

文档：文档

推荐阅读