Question

我正在尝试使用Google Javascript API从名为data的变量渲染GeoJSON多边形。叠加层无法正常渲染，我不知道为什么。有人可以告诉我如何在地图上渲染多边形吗？

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

var x=new google.maps.LatLng(40.75597,-73.974228);

function initialize() {

  var data = { "type" : "Polygon", "coordinates" : [ [ [ -73.974228, 40.75597 ], [      -73.983841, 40.742931 ], [ -74.008133, 40.75307500000001 ], [ -73.998131, 40.765915 ], [ -73.974228, 40.75597 ] ] ] }

  var mapProp = {
    center:x,
    zoom:4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);     
  map.data.loadGeoJson(data);   
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Answer 1

我在your code：Uncaught InvalidValueError: not a Feature or FeatureCollection时出现javascript错误。使多边形成为“特征”：

var data = {
    type: "Feature",
    geometry: {
        "type": "Polygon",
            "coordinates": [
            [
                [-73.974228, 40.75597],
                [-73.983841, 40.742931],
                [-74.008133, 40.75307500000001],
                [-73.998131, 40.765915],
                [-73.974228, 40.75597]
            ]
        ]
    }
};

working fiddle

代码段：

function initialize() {
  var data = {
    type: "Feature",
    geometry: {
      "type": "Polygon",
      "coordinates": [
        [
          [-73.974228, 40.75597],
          [-73.983841, 40.742931],
          [-74.008133, 40.75307500000001],
          [-73.998131, 40.765915],
          [-73.974228, 40.75597]
        ]
      ]
    }
  };

  var mapProp = {
    center: new google.maps.LatLng(40.75597, -73.974228),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  map.data.addGeoJson(data);
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #googleMap {
  width: 100%;
  height: 100%;
}

<script src="http://maps.google.com/maps/api/js"></script>
<div id="googleMap"></div>

Answer 2

首先，geojson对象必须是Feature或FeatureCollection。

其次，使用： map.data.addGeoJson(data)从变量加载geojson 代替： map.data.loadGeoJson(data)用于从.json文件加载geojson

Google Maps API

中的更多信息

使用Google Map Javascript API从JavaScript变量渲染GeoJSON多边形叠加层

2 个答案: