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,
});
});
}