无法加载 geojson 文件
Can't load geojson file
我正在尝试在我的地图上加载 geoJson 文件,但它不起作用。
这是我的代码:
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[57.089460, -2.082101],
[56.744047, -2.464766],
[56.977826, -2.720955],
[57.089460, -2.082101]
]
]
}
}
在初始化函数中:
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(56.975012, -2.343829),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('js/coordinates.json');
localLayer.setMap(map);
如果你看到错误,请告诉我我做错了什么。
(我的 json 文件的路径是正确的)
特征对象必须有一个名为 "properties".feature-objects.
的成员
因此它可以为 null,您可以将 "properties":null
添加到您的特征对象。
如果我运行你的geoJSON通过geojsonlint.com,它是无效的:
Invalid GeoJSON
Line 1: "properties" property required
这验证了(但坐标是向后的):
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[57.089460, -2.082101],
[56.744047, -2.464766],
[56.977826, -2.720955],
[57.089460, -2.082101]
]
]
}
};
修正坐标:
代码片段:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(56.975012, -2.343829),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var localLayer = new google.maps.Data();
localLayer.addGeoJson(geoJson);
localLayer.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-2.082101, 57.089460],
[-2.464766, 56.744047],
[-2.720955, 56.977826],
[-2.082101, 57.089460]
]
]
}
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
我正在尝试在我的地图上加载 geoJson 文件,但它不起作用。
这是我的代码:
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[57.089460, -2.082101],
[56.744047, -2.464766],
[56.977826, -2.720955],
[57.089460, -2.082101]
]
]
}
}
在初始化函数中:
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(56.975012, -2.343829),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('js/coordinates.json');
localLayer.setMap(map);
如果你看到错误,请告诉我我做错了什么。 (我的 json 文件的路径是正确的)
特征对象必须有一个名为 "properties".feature-objects.
的成员因此它可以为 null,您可以将 "properties":null
添加到您的特征对象。
如果我运行你的geoJSON通过geojsonlint.com,它是无效的:
Invalid GeoJSON Line 1: "properties" property required
这验证了(但坐标是向后的):
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[57.089460, -2.082101],
[56.744047, -2.464766],
[56.977826, -2.720955],
[57.089460, -2.082101]
]
]
}
};
修正坐标:
代码片段:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(56.975012, -2.343829),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var localLayer = new google.maps.Data();
localLayer.addGeoJson(geoJson);
localLayer.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-2.082101, 57.089460],
[-2.464766, 56.744047],
[-2.720955, 56.977826],
[-2.082101, 57.089460]
]
]
}
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>