嘗試使用GeoJSON在Google地圖上繪制標記

Question

我正在嘗試使用給定輸入坐標的“ geojson”在“ google maps”上打印標記。下面是JSON文件。

{
 "type": "FeatureCollection",
 "features":[{
  "type":"Feature",
   "geometry":
    {
    "type":"Point",
    "coordinates":[-117.7431667,35.9595,0.01]
    }
    }
     ]

我的具體問題是我在“坐標”部分中獲得了3個參數。我已經參考了幾個示例，其中“坐標”具有兩個參數。

var map;
function initialize() {
     map = new google.maps.Map(document.getElementById('mapDisplay'), {
      zoom: 8,
      center: new google.maps.LatLng(44.5403, -78.5463),
      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

    $("#button3").click(function(){

    $.get("http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-10-14&endtime=2015-10-21",
       function(data,status){
       console.info("test");
       $.each(data.features, function (i, obj) {
          $.each(obj.geometry, function (ind, obj) {
                if(ind=="coordinates")
                    console.log("key:" + ind + " value:" + obj);
                    var coords = obj;
                    var latLng = new google.maps.LatLng(coords[2],coords[1],coords[0]);
                    var marker = new google.maps.Marker
                    ({
                    position: latLng,
                      icon: iconBase + 'schools_maps.png',

                       map: map

                   });


          });
       });
   });
});
 }
google.maps.event.addDomListener(window, 'load', initialize);
 });
</script>
<body>
<div id="mapDisplay">
</div>
<div id="button_Display">
<button id="button1">Sesimic Events last week</button>
</div>
<div id="Sesimic_Events">
<button id="button2">Places affected</button>
</div>
<div id="markers">
<button id="button3">GoogleMarkers</button>
</div>
<div id="result">
</div>

任何幫助將不勝感激。 下面的附件是我運行“ googlemarkers”按鈕時得到的輸出的屏幕截圖

Answer 1

我認為您使這項任務過於復雜。 在此處閱讀有關GeoJSON詳細格式的信息-> http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson_detail.php

JSON響應的features部分的每個項目始終采用以下格式：

{
  type: "Feature",
  properties: {
    //a LOT of properties ...
  },
  geometry: {
    type: "Point",
    coordinates: [
      longitude, //<-- you need this
      latitude,  //<-- and this
      depth
    ]
  },
  id: String
}

因此，繪制地震標記很簡單：

$.get("http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-10-14&endtime=2015-10-21",            function(data,status){
  var latLng, marker;
  $.each(data.features, function(i, obj) {
      latLng = new google.maps.LatLng(
         parseFloat(obj.geometry.coordinates[1]), 
         parseFloat(obj.geometry.coordinates[0])
      )    
      marker = new google.maps.Marker({
         position: latLng,
         map: map
      })     
   })
})

您的代碼已簡化並在這里工作-> http://jsfiddle.net/9p9pk3je/

Answer 2

為了加載和解析GeoJSON數據，您可以利用Data API ，以下示例演示了如何加載GeoJSON數據和放置標記：

例

 var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false }); map.data.addListener('addfeature', function (o) { setMarker(map, o.feature); }); map.data.loadGeoJson("http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-10-14&endtime=2015-10-21"); } function setMarker(map, feature) { var latLng = feature.getGeometry().get(); var marker = new google.maps.Marker({ position: latLng, map: map }); }

  html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

  <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=drawing&callback=initMap" async defer></script>

嘗試使用GeoJSON在Google地圖上繪制標記

問題描述

2 個解決方案

解決方案1
2 已采納 2015-10-22 07:16:07

解決方案2
1 2015-10-22 11:52:16

嘗試使用GeoJSON在Google地圖上繪制標記

問題描述

2 個解決方案

解決方案1 2 已采納 2015-10-22 07:16:07

解決方案2 1 2015-10-22 11:52:16

解決方案1
2 已采納 2015-10-22 07:16:07

解決方案2
1 2015-10-22 11:52:16