如何在角度中使用MapLabel

Question

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

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

请在这些问题上帮助我，

提前谢谢。

Answer 1

Google Maps JavaScript API v3实用程序文档表示，MapLabel包含在从未正式发布和未维护的包中。您可以在github链接上打开一个问题，以确定其包含的优先级。

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

这里是在drawPolygon函数中修改的代码片段和示例代码；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,
});


});
}