如何在不使用标记的情况下以角度打字稿向我的地图添加文本/标签?

Question

>我正在使用角度的agm-map。我需要在地图中多边形的中心添加一个标签/文本。 如何在不使用标记的情况下在Typescript中实现它？

我尝试使用MapLabel Utility来做到这一点。看看下面的代码。

label: new MapLabel({
text: result[index].name,
position: new google.maps.LatLng(object.lat, object.lng),
fontSize: 10,
fontColor: #000,
labelInBackground: true,
strokeColor: #000,
map: map
})

我也参考了下面的链接 https://codepen.io/adg29/pen/reGaPd

提前谢谢你。

Answer 1

您需要首先获取多边形中心的坐标，并将其用作标签坐标的值。为了获得多边形的中心，我按照这篇 SO 帖子中的答案进行操作，然后使用坐标作为标签覆盖中ll的值。

解释一下： 首先，我注意到您在多边形之前创建了标签覆盖。因此，要获取多边形中心的坐标，您需要将多边形移动到标签叠加之前。

然后，您将添加来自 SO 帖子的代码片段，以通过 extend(( 方法将多边形的每个点传递给 LatLngBounds 对象。

获取边界的中心，并将其用作标签覆盖中 ll 的值。

下面是代码应如何显示的代码片段。您还可以在此处看到工作小提琴。

// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < triangleCoords.length; i++) {
bounds.extend(triangleCoords[i]);
}
var polygonCenter = bounds.getCenter();
var overlay1 = new LabelOverlay({
ll      : polygonCenter,
//minBox    : box,
minBoxH     : 0.346,
minBoxW     : 1.121,
maxBoxH     : 0.09,
maxBoxW     : 0.3,
//className : 'small',
debugBoxes  : true,
debugVisibility : true,
maxZoom     : 10,
minZoom     : 6,
label       : "Hello world",
map     : map
});