0
我想實現本頁面所示的圓形可視化,並且已經在文件中指定了geojson數據。谷歌圈子可視化沒有出現
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