google-maps-api-3 - 在 Google Map V3 中，如何在多边形内部和上方放置标签？

Question

在 Google Map V3 中，如何在多边形内部和上方放置标签？没有 V2 中的标签覆盖当我使用库 maplabel 时，我可以将文本放在里面，但不能放在上面，即使我指定了更高的 Z-index。谢谢菲尔

Answer 1

为时已晚，但我遇到了同样的问题，这段代码运行良好！

var triangleCoords = [
    { lat:30.655993, lng: 76.732375 },
    { lat: 30.651379, lng: 76.735808},
    { lat: 30.653456, lng: 76.729682}
]

var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords ,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});
attachPolygonInfoWindow(bermudaTriangle)

function attachPolygonInfoWindow(polygon) {
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(polygon, 'mouseover', function (e) {
        infoWindow.setContent("Polygon Name");
        var latLng = e.latLng;
        infoWindow.setPosition(latLng);
        infoWindow.open(map);
    });
}

Answer 2

maplabel 在 mapPane 的画布上呈现其文本，通常呈现在 floatPane 中所有 zIndex 值的下方。要将 mapPane 画布带入您的 zIndex 顺序，请尝试：

var mapLabel = new MapLabel({
    position: new google.maps.LatLng(yourLat, yourLng),
    text: 'test',
    zIndex: 101} );
$(mapLabel.getPanes().mapPane).css('z-index', mapLabel.zIndex);

Answer 3

使用google-maps-utility-library

设置标签内容，找到多边形的中心位置，就是这样:)

var labelOptions = {
    content: label,
    boxStyle: {
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: this.my_getBounds(gpoints).getCenter(),
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
};

var polygonLabel = new InfoBox(labelOptions);
polygonLabel.open(map);

Answer 4

您可以使用信息框的position字段。使用以下代码获取多边形的中心位置。

const bounds = new window.google.maps.LatLngBounds(); bounds.extend(new window.google.maps.LatLng(lat1,lng1)); bounds.extend(new window.google.maps.LatLng(lat2,lng2)); .. .. let polygonCenter = bounds.getCenter();