Trong Google Map V3, cách đặt nhãn bên trong và bên trên đa giác?

Question

Trong Google Map V3, cách đặt nhãn bên trong và bên trên đa giác? Không có lớp phủ nhãn như trong V2 Khi tôi sử dụng nhãn bản đồ thư viện, tôi có thể đặt văn bản bên trong, nhưng không ở trên, ngay cả khi tôi chỉ định chỉ mục Z cao hơn. Cảm ơn Phil

Answer 1

Sử dụng google-maps-utility-library

Set nội dung nhãn, tìm center position của đa giác của bạn và thats nó :)

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 2

maplabel làm cho văn bản của mình trên vải trong mapPane, mà thường làm cho dưới đây tất cả các giá trị zIndex trong floatPane. Để mang vải mapPane vào nề nếp ZIndex của bạn, hãy thử:

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

Đó là quá muộn nhưng tôi đã phải đối mặt với cùng một vấn đề và mã này hoạt động tốt!

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