如何以角度使用 MapLabel？答案

【问题标题】：How can I use MapLabel in angular?如何以角度使用 MapLabel？
【发布时间】：2022-01-23 13:21:12
【问题描述】：

我在地图上显示多个多边形，我想在多边形顶部显示文本，所以我知道使用地图标签我们可以在上面的多边形上显示文本，但在实现地图标签时我迷失了（即使我也没有找到任何 NPM）

我附上堆栈闪电战 URL 以供参考：- https://stackblitz.com/edit/angular-draw-polygon-google-maps-d4xnxq?file=app%2Fapp.component.ts

请帮助我解决这些问题，

提前致谢。

【问题讨论】：

标签： angular typescript google-maps

【解决方案1】：

Google Maps JavaScript API v3 Utilities doc 表示 MapLabel 包含在从未正式发布且未维护的软件包中。您可以在 github 链接上打开一个问题以优先考虑它的包含。

我们可以使用的解决方法是使用带有不可见图像的 Marker 对象作为图标，然后使用 label 属性将要使用的标签放入多边形中。这看起来像是多边形的标签。

这是在您的 drawPolygon 函数中修改的代码 sn-p 和 sample code，其中我使用的图像（“https://ibb.co/cJpsnpb”）是不可见的图像：

  drawPolygon() {
    const lat_lng = { lat: 66.7225378417214, lng: -155.04016191014387 };
    const map = new google.maps.Map(
      document.getElementById('map') as HTMLElement,
      {
        center: lat_lng,
        zoom: 7,
        mapTypeControl: true,
        mapTypeControlOptions: {
          mapTypeIds: ['roadmap'],
        },
      }
    );
    var infowindow = new google.maps.InfoWindow();
    this.mapIcons.data.forEach((poly, i) => {
      let polygonsMap = new google.maps.Polygon({
        map: map,
        paths: poly.polygons,
        strokeColor: '#FF8C00',
        fillColor: '#FF8C00',
        strokeOpacity: 0.8,
        strokeWeight: 2,
      });
      google.maps.event.addListener(polygonsMap, 'click', function (event) {
        infowindow.setContent(poly.locator);
        infowindow.setPosition(event.latLng);
        infowindow.open(map);
      });
      polygonsMap.setMap(map);
       var bounds = new google.maps.LatLngBounds();
       for (let i = 0; i < poly.polygons.length; i++) {
       bounds.extend(poly.polygons[i]);
     }
      var myLatlng = bounds.getCenter();

      const image =
      "https://ibb.co/cJpsnpb";
    const beachMarker = new google.maps.Marker({
      position: myLatlng,
      label: {
        text: poly.name,
        color: 'black',
        fontSize: "48px"
      },
      map,
      icon: image,
    });


      
    });
  }

【讨论】：

嗨@Pagemag，它工作正常...感谢您的时间和精力。