Googleサークルのビジュアライゼーションが表示されない

このページに示されているようにサークルの視覚化を達成したいと思います。指定した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>

出典

2016-12-30 Wboy

あなたの座標は（GeoJSON coordinatesは経度、緯度を注文している）の後方である：

'coordinates': [1.3944646999999999, 103.74665109999999],

にすべきである：

'coordinates': [103.74665109999999, 1.3944646999999999],

コードスニペット：

var map; 
 
var data = { 
 
    'features': [{ 
 
    'properties': {}, 
 
    'geometry': { 
 
     'coordinates': [103.74665109999999, 1.3944646999999999], 
 
     '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 
 
    }; 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

/* 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; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

出典

2016-12-30 10:38:49 geocodezip

...私はそれを逃したとは思わない。どうもありがとうございます！ – Wboy

Googleサークルのビジュアライゼーションが表示されない

答えて

関連する問題