angular - 如何在不使用标记的情况下以 angular -typescript 向我的地图添加文本/标签?
问题描述
我在角度使用 agm-map。我需要在地图中的多边形中心添加一个标签/文本。如何在不使用标记的情况下在Typescript中实现它?
我尝试使用 MapLabel 实用程序来做到这一点。看看下面的代码。
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
先感谢您。
解决方案
您需要首先获取多边形中心的坐标并将其用作标签坐标的值。为了得到多边形的中心,我按照这个SO 帖子的答案,然后使用坐标作为 labelOverlay中ll的值。
解释一下:首先,我注意到您在多边形之前创建了 labelOverlay。所以要得到多边形中心的坐标,需要把多边形移到labelOverlay之前。
然后,您将添加来自 SO 帖子的代码片段,以通过 extend() 方法将多边形的每个点传递给 LatLngBounds 对象。
获取边界的中心并将其用作 labelOverlay 中 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
});
推荐阅读
- r - SankeyNetwork随着时间的推移
- kubernetes - Kubernetes 机密作为环境变量添加空格字符
- ios - 为什么 UIViewController 是从同名 XIB 创建的,即使使用了空构造函数?
- oracle - 动态操作之前的 Oracle 顶点表单验证
- android - 如何使用 gradle 全局禁用仅执行内存?
- java - 格式为“#%”的 XSSFDataFormat 乘以 100 个数字单元格值。如何处理?
- angular - 如何在 Angular 中使用订阅功能测试 Observable?
- html - 在两个路由器插座中显示相同的组件
- javascript - 如何在嵌套路由中渲染组件
- google-kubernetes-engine - Anthos MCI:如何在 GKE 中为 redirectToHttps 注释应用 FrontendConfig