überlappende Feature von Google Maps

Question

Wie kann ich programmatisch in Javascript definieren, welche Funktion auf dem anderen ist, wenn sie

in diesem Bild überlappen ich auf der kleineren geografischen Merkmal geklickt haben, aber die Informationen für die äußere geographische Eigenschaft kam auf. Ich möchte programmatisch die kleineren Funktionen oben setzen.

Hier ist der mein Code die Karte in Javascript-

map.data.loadGeoJson('<path to my geojson definition>'); 
map.data.setStyle(function (feature) { 
    let color = 'gray'; 
    console.log(feature); 
    if (feature.getProperty('isColorful')) { 
    color = 'blue'; 
    } 
    return ({ 
    fillColor: color, 
    strokeColor: color, 
    strokeWeight: 1 
    }); 
}); 

map.data.addListener('click', function (event) { 
    let name = event.feature.getProperty('name'); 

    let contentString = '<h4>Polygon Info</h4><br>'; 

    contentString += '<p>'; 
    if (name) { 
    contentString += '<b>Name:</b>' + name + '<br>'; 
    }   
    contentString += '</p>'; 

    let infowindow = new google.maps.InfoWindow({ 
    content: contentString, 
    position: event.latLng 
    }); 

    infowindow.open(map); 

    event.feature.setProperty('isColorful', true); 
}); 

Hinweis ich umgekehrt die Reihenfolge der Funktionen in der GeoJSON Datei selbst zu füllen und dass das Verhalten nicht ändern.

Answer 1

Sie die Z-Index Eigenschaft feature.Assuming verwenden, können Sie ein Feature Eintrag von einem anderen disinguish können Sie z-Index je nach Bedarf in setStyle() Funktion, nur trainieren entsprechende Werte

return ({ 
    fillColor: color, 
    strokeColor: color, 
    strokeWeight: 1, 
    zIndex: zIndex 
}); 

einstellen Oder aktualisieren Sie den Z-Index, wenn die Maus

map.data.addListener('mouseover', function(e) { 
    map.data.overrideStyle(e.feature, { 
    //strokeColor: '#1e3a2a', 
    //strokeWeight: 2, /* can also change these like hover effect */ 
    zIndex: 6 
    }); 
}); 

map.data.addListener('mouseout', function(e) { 
    map.data.revertStyle(); 
});