Question

我一直试图在Google地图上显示JSON文件两天了，我觉得我已经尝试过互联网上的所有内容但没有成功......

JSON文件相当大（7.5mb），因此可能是问题的一部分。无论如何，我仍然需要做这项工作。 JSON文件由750多个组合的运营商路由组成，每个运营商路由都拥有自己的＆＃34;属性＆＃34;这样它们就会显示为不同的颜色。每个承运人路线在geometry.coordinates

中具有不同的坐标量

JSON文件的样本（是的，我知道它很难看）：

{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84",
"marker-size": "medium",
"marker-symbol": "circle",
"marker-color": "#28f30c"
}
},
"features": [
{
"type": "Feature",
"properties": {
"Name": "",
"Description": "",
"marker-type": "circle",
"marker-color": "#73b8b2"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
-96.654725,
33.110625
],
[
-96.654707,
33.11062
],
[
-96.654692,
33.110615
],
[
-96.654673,
33.110609
]
]
}
},
{
"type": "Feature",
"properties": {
"Name": "",
"Description": "",
"marker-type": "circle",
"marker-color": "#b4a2e1"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
-96.876587,
32.971849
],
[
-96.876579,
32.97197
],
[
-96.876568,
32.971729
]
]
}
},
{
"type": "Feature",
"properties": {
"Name": "",
"Description": "",
"marker-type": "circle",
"marker-color": "#a4b333"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[
-96.723167,
32.916299
],
[
-96.723159,
32.91627
]
]
}
}
]
}

我不能为我的生活弄清楚如何在谷歌地图上加载它们。我尝试了数百种不同的东西，最新的是：

var map;

  function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 2,
      center: new google.maps.LatLng(2.8,-187.3),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

   $.getJSON('CarrierRoutes.json', function(data){
  // loop  and add markers
  for (var i = 0; i < data.length; i++) {
var item = data[i];

var markerLatlng = new google.maps.LatLng(item.Post.geometry.coordinates);
var marker = new google.maps.Marker({
    position: markerLatlng
});
marker.item = item; // store information of each item in marker
marker.setMap(map); // where `map` is the instance of Google Map
google.maps.event.addListener(marker, "click", function(mark) {
    // retrieve information using `this.item` and create dynamic HTML to 

show it. 
        // this.item.Post.datetime, this.item.Post.content etc.
    });

}
});

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

这可能是正确的FAR ......任何帮助都表示赞赏，我已经尝试了所有我知道的东西，并且需要停止浪费时间搞乱它。提前谢谢！

Answer 1

您的几何图形为＆＃34; MultiPoint＆＃34;。我不希望那些渲染为路线，就像标记一样。也许您应该使用类型为＆＃34; LineString＆＃34;的几何，以及原生支持GeoJSON的google.maps.Data layer：

example fiddle（点击标记查看线条，它们真的很小......）

示例代码段：

＆＃13;

function initialize() {
  // Create a simple map.
  features = [];
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137.883
    }
  });
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "Dallas, TX"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
  // process the loaded GeoJSON data.
  var bounds = new google.maps.LatLngBounds();
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'LineString') {
      var polys = e.feature.getGeometry().getArray();
      for (var i = 0; i < polys.length; i++) {
        var marker = new google.maps.Marker({
          position: polys[i],
          icon: {
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(3.5, 3.5),
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png"
          },
          map: map
        });
        google.maps.event.addListener(marker, 'click', function() {
          map.setCenter(this.getPosition());
          map.setZoom(19);
        });
        bounds.extend(polys[i]);
      }
      map.fitBounds(bounds);
    }
  });
  map.data.addGeoJson(data);
  map.data.setStyle({
    strokeWeight: 4,
    strokeColor: 'blue'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
var data = {
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84",
      "marker-size": "medium",
      "marker-symbol": "circle",
      "marker-color": "#28f30c"
    }
  },
  "features": [{
    "type": "Feature",
    "properties": {
      "Name": "",
      "Description": "",
      "marker-type": "circle",
      "marker-color": "#73b8b2"
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-96.654725,
          33.110625
        ],
        [-96.654707,
          33.11062
        ],
        [-96.654692,
          33.110615
        ],
        [-96.654673,
          33.110609
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "Name": "",
      "Description": "",
      "marker-type": "circle",
      "marker-color": "#b4a2e1"
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-96.876587,
          32.971849
        ],
        [-96.876579,
          32.97197
        ],
        [-96.876568,
          32.971729
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "Name": "",
      "Description": "",
      "marker-type": "circle",
      "marker-color": "#a4b333"
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-96.723167,
          32.916299
        ],
        [-96.723159,
          32.91627
        ]
      ]
    }
  }]
};

＆＃13;

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;

＆＃13;

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

＆＃13;

将组合的JSON文件加载到Google地图中

1 个答案: