Wie wird die Google Map Feature-ID von Geojson festgelegt?

Question

Wie setze ich Google Map's feature'sid von geojson?

id ist, was von getId() Funktion zurückgegeben wird.

Der folgende Code funktioniert nicht (druckt undefined), obwohl id Eigenschaft in Eigenschaften vorhanden:

var uluru = {lat: -25.363, lng: 131.044}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: uluru 
    }); 
    var data = { 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [131.044, -25.363] 
    }, 
    "properties": { 
     "Id": 12 
    } 
    }; 
    map.data.addGeoJson(data); 
    map.data.forEach(function(feature){ 
    console.log("Id from Google's feature: " + feature.getId()); 
    }); 

Fiddle: https://jsfiddle.net/dimskraft/hj2t5je3/5/

UDPATE

ich schreiben kann

var data = { 
    "type": "Feature", 
    "id": 13, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [131.044, -25.363] 
    }, 

aber wird das nicht falsch Geojson?

Answer 1

Sie sollten einen zweiten Parameter an die addGeoJson() -Methode übergeben, der definiert, welche Eigenschaft in Ihrem GeoJSON als ID verwendet wird.

Der zweite Parameter ist Data.GeoJsonOptions

Objekt

https://developers.google.com/maps/documentation/javascript/reference#Data.GeoJsonOptions

So ist die Veränderung sein wird:

map.data.addGeoJson(data, { 
    idPropertyName: "Id" 
}); 

Code-Snippet

function initMap() { 
 
    var uluru = {lat: -25.363, lng: 131.044}; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: uluru 
 
    }); 
 
    var data = { 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [131.044, -25.363] 
 
    }, 
 
    "properties": { 
 
     "Id": 12 
 
    } 
 
    }; 
 
    map.data.addGeoJson(data, { 
 
    idPropertyName: "Id" 
 
    }); 
 
    
 
    map.data.forEach(function(feature){ 
 
    \t console.log("Id from Google's feature: " + feature.getId()); 
 
    }); 
 
}

#map { 
 
    height: 400px; 
 
    width: 100%; 
 
}

<h3>My Google Maps Demo</h3> 
 
<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"> 
 
</script>