0
このページに示されているようにサークルの視覚化を達成したいと思います。指定したgeojsonデータがファイルにあります。Googleサークルのビジュアライゼーションが表示されない
https://developers.google.com/maps/documentation/javascript/earthquakes
私のデータは、より多くのポイントと
var data = {'features': [{'properties': {}, 'geometry': {'coordinates': [1.3944646999999999, 103.74665109999999], 'type': 'Point'}, 'type': 'Feature'}], 'type': 'FeatureCollection'};
形態です。 map.data.loadGeoJsonをmap.data.addGeoJsonに変更しました。しかし、私がファイルを開くと、プレーンマップは何もポイントや円で表示されません。
ここにAPIキーが削除された私のフルコードです。誰かが私を正しい方向に向けることができますか？ありがとうございました。
<!DOCTYPE html>
<html>
<head>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var data = {'features': [{'properties': {}, 'geometry': {'coordinates': [1.3944646999999999, 103.74665109999999], 'type': 'Point'}, 'type': 'Feature'}], 'type': 'FeatureCollection'};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: -33.865427, lng: 151.196123},
mapTypeId: 'terrain'
});
map.data.addGeoJson(data); //add the data here
map.data.setStyle(function(feature) {
var magnitude = 4; //feature.getProperty('mag');
return {
icon: getCircle(magnitude)
};
});
}
function getCircle(magnitude) {
return {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .2,
scale: Math.pow(2, magnitude)/2,
strokeColor: 'white',
strokeWeight: .5
};
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[key_removed]&callback=initMap">
</script>
</body>
</html>
...私はそれを逃したとは思わない。どうもありがとうございます！ – Wboy