Rav*_*ous 1 javascript google-maps geojson google-maps-api-3
更新
任何看到这个并说嘿等待他使用的人，map.data.addGeoJson()而不是.loadGeoJson()因为在本地加载 JSON 时小提琴需要 addGeoJson。loadGeoJSson()如果在 Web 服务器上运行，则与上述代码的工作方式相同。
下面的原始问题
我正在网络服务器上运行所有这些，因此根据 googleMaps 文档，只要 URI 正确，从同一域加载 geoJSON 就被接受（对于开发人员，我正在通过 http 运行 geoJSON 请求，不确定这是否重要）。简单来说，我将我的 JSON 对象与我的 index.html 和 mapInit.js 文件放在同一目录中。根据 API 文档，我尝试过的所有功能都可以在 3.21 版的实际参考部分中使用，所以我假设它们仍然有效。我还有一个 API 密钥，我已经相应地插入了它。
我的问题
为什么 loadGeoJson 不起作用，是我声明不正确，还是样式不正确？
什么工作
地图加载得很好并以正确的位置为中心，然后加载自定义标记并相应地将地图居中。
什么不工作
使用加载 geoJSON 文件时，customLayer.loadGeoJSON("some.json")如果我切换到使用，customLayer.addGeoJSON("some.json")我不会在控制台中收到无效的功能或功能集合错误。另外customLayer.setStyle({icon:image})似乎没有设置我也尝试过的样式customLayer.StyleOptions({icon:image})。
所以我坚持，loadGeoJson()因为它似乎正在加载 JSON。
索引.html
!DOCTYPE html
<html>
<body>
<div id="myMap" style='padding:0; height: 800px; width:100%;'></div>
</body>
<center>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script> src="mapInit.js"</script>
</html>
地图初始化.js
function init(){
var mapCanvas = document.getElementById('myMap');
var map;
var image = "../images/marker.svg";
var userCenter = new google.maps.LatLng(30.382288, -97.727447);
var mapOptions = {
draggable: true,
zoomControl: true,
scrollwheel: true,
disableDoubleClickZoom: false,
zoom: 8,
center:userCenter
};
map = new google.maps.Map(mapCanvas,mapOptions);
var customLayer = new google.maps.Data();
customLayer.loadGeoJson("some.json");
customLayer.setStyle({ title: '#',
icon:image,
map: map,
});
customLayer.forEach(function(feature) {
var point = new google.maps.LatLng(feature.getProperty('coordinates'))
var mark = new google.maps.Marker({
position: point,
title: '#',
icon:image,
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
});
// customLayer.setMap(map);
var marker = new google.maps.Marker({
position: userCenter,
title: 'Your Location',
icon:image,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
}
我也尝试添加customLayer.setMap(map);而不是map:map在setStyle()没有运气的情况下声明。
some.json 文件位于正确的目录下，因为 Chrome 和 firefox 控制台正在注册 200 OK
一些.json
{
"type": "FeatureCollection",
"features":[
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [30.388256,-97.739863]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [30.389904,-97.739226]},
"properties": {"prop1": "value1"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [30.384617,-97.739348]},
"properties": {"prop2": "value2"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [30.387876,-97.7396]},
"properties": {"prop3": "value3"}
}
]
}
您的坐标在 GeoJSON 中向后。GeoJSON 是 [经度，纬度]，90+ 度是无效的纬度。如果您将 GeoJSON 粘贴到geojsonlint.com 中，您将在南极看到所有标记。
GeoJSON 应该是：
{
"type": "FeatureCollection",
"features":[
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.739863,30.388256]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.739226,30.389904]},
"properties": {"prop1": "value1"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.739348,30.384617]},
"properties": {"prop2": "value2"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.7396,30.387876]},
"properties": {"prop3": "value3"}
}
]
};
代码片段：
{
"type": "FeatureCollection",
"features":[
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.739863,30.388256]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.739226,30.389904]},
"properties": {"prop1": "value1"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.739348,30.384617]},
"properties": {"prop2": "value2"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [-97.7396,30.387876]},
"properties": {"prop3": "value3"}
}
]
};
function init() {
var mapCanvas = document.getElementById('myMap');
var map;
var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var userCenter = new google.maps.LatLng(30.382288, -97.727447);
var mapOptions = {
draggable: true,
zoomControl: true,
scrollwheel: true,
disableDoubleClickZoom: false,
zoom: 13,
center: userCenter
};
map = new google.maps.Map(mapCanvas, mapOptions);
var customLayer = new google.maps.Data();
map.data.addGeoJson(jsonData);
map.data.setStyle({
title: '#',
icon: image,
map: map,
});
map.data.forEach(function(feature) {
var point = new google.maps.LatLng(feature.getProperty('coordinates'))
var mark = new google.maps.Marker({
position: point,
title: '#',
icon: image,
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
});
// customLayer.setMap(map);
var marker = new google.maps.Marker({
position: userCenter,
title: 'Your Location',
icon: image,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
}
google.maps.event.addDomListener(window, 'load', init);
var jsonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-97.739863, 30.388256]
},
"properties": {
"prop0": "value0"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-97.739226, 30.389904]
},
"properties": {
"prop1": "value1"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-97.739348, 30.384617]
},
"properties": {
"prop2": "value2"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-97.7396, 30.387876]
},
"properties": {
"prop3": "value3"
}
}]
};html,
body,
#myMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}| 归档时间： |
|
| 查看次数： |
2027 次 |
| 最近记录： |