В Google Map V3, как поместить метку внутри и над многоугольником?

В Google Map V3, как поместить метку внутри и над многоугольником? Нет наложения надписей, как в V2. Когда я использую библиотечную метку карты, я могу поместить текст внутри, но не выше, даже если я укажу более высокий Z-индекс. Спасибо, Фил.


google-maps-api-3 label polygon
person trachy    schedule 19.12.2012    source источник
comment
Вы когда-нибудь догадывались об этом?   -  person Sealer_05    schedule 09.03.2013
comment
Вы ищете что-то вроде это (использует FusionTablesLayer для полигона, InfoBox для метки )   -  person geocodezip    schedule 06.04.2013
comment
возможный дубликат метки карты Javascript API v3 Google Maps и полигонов   -  person geocodezip    schedule 22.07.2016
comment
возможный дубликат Карты Google получить центр координат (поместить метку в центр многоугольника)   -  person geocodezip    schedule 22.07.2016

Ответы (4)


arrow_upward
7
arrow_downward

Уже слишком поздно, но я столкнулся с той же проблемой, и этот код отлично работает!

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);
    });
}
person Mohan Singh    schedule 27.06.2017

arrow_upward
5
arrow_downward

maplabel отображает свой текст на холсте в mapPane, который обычно отображается ниже всех значений zIndex в floatPane. Чтобы добавить холст 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);
person Andrew    schedule 21.04.2016
comment
Это потрясающе. Должен быть самый популярный и принятый ответ :) - person Tarmo; 06.03.2019

arrow_upward
1
arrow_downward

Используйте библиотеку 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);
person Jaykishan    schedule 27.11.2013

arrow_upward
-1
arrow_downward

Вы можете использовать поле position InfoBox. Получите положение центра многоугольника, используя приведенный ниже код.

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

person Senthil Arumugam SP    schedule 18.06.2019