无法读取未定义的 Google 映射 JSON 的属性 'geometry'

Question

我无法获取要读取的 JSON 对象的属性以创建标记。过去，我使用 feature.geometry.coordinates[0] 和 feature.geometry.coordinates[1] 来读取标记的坐标。

This is an example of what I am trying to do. 据我了解，读取 JSON（在本例中为 var）对象的属性是一回事。

我在 JavaScript 触发之前加载了 Google 地图和 Stamen Toner 底图，所以我不认为在我调用 [=] 之前没有加载 div 43=] 但我肯定是错的。

我做错了什么？

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maryland Prisoner Map</title>
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--Google Maps API-->
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <!--Stamen Basemaps-->
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
    <!--CSS-->
    <link href="style.css" rel="stylesheet" type="text/css">
    <!--JavaScript-->
    <script src="script.js" type="text/javascript"></script>
</head>
<body class="page-wrap">
    <div>
        <h1 id="header">Maryland Prisoner Map</h1>
        <p></p>
        <div id="map"></div>
    </div>
    <footer class="site-footer">Thank you for checking out my website!</footer>
</body>
</html>

CSS:

    #header {
    text-align: center;
}

#map {
    height: 800px;
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 2px 2px 1px 2px gray;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -90px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 90px; 
}
.site-footer {
  background: orange;
}

JavaScript:

$(document).ready(function() {
    var layer = "toner-lite";
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39.290385, -76.612189),
        zoom: 10,
        mapTypeId: layer,
        mapTypeControlOptions: {
            mapTypeIds: [layer]
        }
    });
    map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
    //Get some JSON
    $.getJSON("JSON/County.geojson", function(data) {
        console.log("The JSON has been sought");
        $.each(data, function(i, data) {
            createMarker(data);
        });
    });

    function createMarker(data) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.feature.geometry.coordinates[0], data.features.geometry.coordinates[1]),
            map: map,
            title: data.features.name
        });
    }
});

样本JSON：

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Address": "14300 McMullen Highway SW", "City": "Cumberland", "State": "MD", "Zip_Code": 21502, "Type": "Detention Center", "Agency_Nam": "Allegany County Detention Center", "County": "Allegany" }, "geometry": { "type": "Point", "coordinates": [ -78.823195987258302, 39.598971947812366 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Address": "131 Jennifer Road", "City": "Annapolis", "State": "MD", "Zip_Code": 21401, "Type": "Detention Center", "Agency_Nam": "Anne Arundel County Detention Center", "County": "Anne Arundel" }, "geometry": { "type": "Point", "coordinates": [ -76.530041483218611, 38.988903980495373 ] } }, . . .

Answer 1

您的代码存在不止一个问题：

（在标题中产生错误的那个）GeoJson 不是您的代码所期望的格式。您要处理特征数组（不是顶级特征 collection object）
```
$.each(geoJsonData.features, function (i, data) {
    createMarker(data);
});
```
坐标是特征的属性（现在是 data）

您正在反向处理纬度和经度。坐标[1]是纬度，坐标[0]是经度：

function createMarker(data) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0]),
        map: map,
        title: data.properties.Agency_Nam
    });
}

proof of concept fiddle

代码片段：

$(document).ready(function() {
  var layer = "toner-lite";
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(39.290385, -76.612189),
    zoom: 10,
    mapTypeId: layer,
    mapTypeControlOptions: {
      mapTypeIds: [layer]
    }
  });
  map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
  var bounds = new google.maps.LatLngBounds();
  //Get some JSON
  // $.getJSON("JSON/County.geojson", function(data) {
  console.log("The JSON has been sought");
  $.each(geoJsonData.features, function(i, data) {
    createMarker(data);
  });
  // });

  function createMarker(data) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.geometry.coordinates[1], data.geometry.coordinates[0]),
      map: map,
      title: data.properties.Agency_Nam
    });
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
  }
});

var geoJsonData = {
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },

  "features": [{
    "type": "Feature",
    "properties": {
      "OBJECTID": 1,
      "Address": "14300 McMullen Highway SW",
      "City": "Cumberland",
      "State": "MD",
      "Zip_Code": 21502,
      "Type": "Detention Center",
      "Agency_Nam": "Allegany County Detention Center",
      "County": "Allegany"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-78.823195987258302, 39.598971947812366]
    }
  }, {
    "type": "Feature",
    "properties": {
      "OBJECTID": 2,
      "Address": "131 Jennifer Road",
      "City": "Annapolis",
      "State": "MD",
      "Zip_Code": 21401,
      "Type": "Detention Center",
      "Agency_Nam": "Anne Arundel County Detention Center",
      "County": "Anne Arundel"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-76.530041483218611, 38.988903980495373]
    }
  }]
};

body,
html {
  height: 100%;
  width: 100%;
}
#header {
  text-align: center;
}
#map {
  height: 85%;
  width: 80%;
  margin: 0 auto;
  border: 1px solid black;
  box-shadow: 2px 2px 1px 2px gray;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -90px;
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer,
.page-wrap:after {
  /* .push must be the same height as footer */
  height: 90px;
}
.site-footer {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<div style="height:100%; width: 100%">
  <h1 id="header">Maryland Prisoner Map</h1>

  <p></p>
  <div id="map"></div>
</div>
<footer class="site-footer">Thank you for checking out my website!</footer>

无法读取未定义的 Google 映射 JSON 的属性 'geometry'

Cannot read property 'geometry' of undefined Google Maps JSON

javascript

jquery

json

google-maps

undefined

无法读取未定义的 Google 映射 JSON 的 属性 'geometry'

Cannot read property 'geometry' of undefined Google Maps JSON

javascript

jquery

json

google-maps

undefined

无法读取未定义的 Google 映射 JSON 的属性 'geometry'