如何以角度使用 MapLabel?

分享于2022年07月17日 angular google-maps typescript 问答
【问题标题】:如何以角度使用 MapLabel?(How can I use MapLabel in angular?)
【发布时间】:2022-01-23 13:21:12
【问题描述】:

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

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

请帮助我解决这些问题,

提前致谢。


【解决方案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,它工作正常...感谢您的时间和精力。