尝试使用 GeoJSON 在谷歌地图上绘制标记答案

【问题标题】：Trying to plot the markers on google map using GeoJSON尝试使用 GeoJSON 在谷歌地图上绘制标记
【发布时间】：2015-10-22 06:11:21
【问题描述】：

我正在尝试使用“geojson”为给定的输入坐标在“谷歌地图”上打印标记。以下是 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”按钮时得到的输出截图

【问题讨论】：

标签： javascript jquery ajax google-maps google-maps-api-3

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：