google Maps Javascript V3.21显示geoJSON功能时出现问题_Javascript_Google Maps_Google Maps Api 3_Geojson

google Maps Javascript V3.21显示geoJSON功能时出现问题

javascript google-maps google-maps-api-3

google Maps Javascript V3.21显示geoJSON功能时出现问题,javascript,google-maps,google-maps-api-3,geojson,Javascript,Google Maps,Google Maps Api 3,Geojson,更新任何看到这一点并说hey wait的人都使用了map.data.addGeoJson（）而不是.loadGeoJson（）这是因为小提琴在本地加载JSON时需要addGeoJsonloadGeoJSson（）在web服务器上运行时，其工作原理与上述代码相同下面的原始问题我在web服务器上运行所有这些，因此根据googleMaps文档，只要URI正确，就可以接受从同一域加载geoJSON（对于开发人员，我也通过http运行geoJSON请求，不确定这是否重要）。简单地说，我将JSON对象

更新

任何看到这一点并说hey wait的人都使用了

map.data.addGeoJson（）

而不是

.loadGeoJson（）

这是因为小提琴在本地加载JSON时需要addGeoJson

loadGeoJSson（）

在web服务器上运行时，其工作原理与上述代码相同

下面的原始问题

我在web服务器上运行所有这些，因此根据googleMaps文档，只要URI正确，就可以接受从同一域加载geoJSON（对于开发人员，我也通过http运行geoJSON请求，不确定这是否重要）。简单地说，我将JSON对象与index.html和mapInit.js文件放在同一个目录中。根据API文档，我尝试过的所有函数都可以在3.21版的实际参考部分使用，所以我假设它们仍然可以工作。我还有一个API密钥，我已经相应地插入了它

我的问题

为什么loadGeoJson不起作用，是我声明的不正确，还是我的样式设置不正确

什么在起作用

地图加载得很好，并以正确的位置为中心，然后加载自定义标记并相应地将地图居中

什么不起作用

当使用

customLayer.loadGeoJSON（“some.json”）

加载geoJSON文件时，如果切换到使用

customLayer.addGeoJSON（“some.json”）

我在控制台中得到无效的功能或功能集合错误。另外，

customLayer.setStyle（{icon:image}）

似乎没有设置我也尝试过的样式

customLayer.StyleOptions（{icon:image}）

所以我坚持使用

loadGeoJson（）

，因为它似乎正在加载JSON

index.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>

我还尝试添加

customLayer.setMap（map）

而不是在

setStyle（）

中声明

map:map

some.json文件在下面，并且在正确的目录中，因为Chrome和firefox控制台正在注册200 OK

some.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粘贴到中，您将在南极看到所有标记

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"}
        }
    ]
};

代码片段：

函数init（）{
var mapCanvas=document.getElementById（'myMap'）；
var映射；
var图像=”http://maps.google.com/mapfiles/ms/micons/blue.png";
var userCenter=newgoogle.maps.LatLng（30.382288，-97.727447）；
变量映射选项={
真的，
动物控制：对，
滚轮：对，
禁用双击缩放：false，
缩放：13，
中心：用户中心
};
map=新的google.maps.map（mapCanvas，mapOptions）；
var customLayer=new google.maps.Data（）；
addGeoJson（jsonData）；
map.data.setStyle({
标题：“#”，
图标：图像，
地图：地图，
});
map.data.forEach（函数（特性）{
var point=new google.maps.LatLng（feature.getProperty（'coordinates'））
var mark=new google.maps.Marker({
位置:点,，
标题：“#”，
图标：图像，
地图：地图，
可拖动：错误，
动画：google.maps.animation.DROP
});
});
//customLayer.setMap（map）；
var marker=new google.maps.marker({
位置：用户中心，
标题：“你的位置”，
图标：图像，
地图：地图，
真的，
动画：google.maps.animation.DROP
});
}
google.maps.event.addDomListener（窗口'load'，init）；
var jsonData={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-97.739863，30.388256]
},
“财产”：{
“prop0”：“value0”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-97.739226，30.389904]
},
“财产”：{
“prop1”：“value1”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-97.739348，30.384617]
},
“财产”：{
“prop2”：“value2”
}
}, {
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-97.7396,30.387876]
},
“财产”：{
“prop3”：“value3”
}
}]
};
html，
身体，
#我的地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
您的坐标在GeoJSON中是向后的。GeoJSON是[经度，纬度]，90+度是无效的纬度。如果将GeoJSON粘贴到中，您将在南极看到所有标记
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"}
        }
    ]
};


代码片段：

函数init（）{
var mapCanvas=document.getElementById（'myMap'）；
var映射；
var图像=”http://maps.google.com/mapfiles/ms/micons/blue.png";
var userCenter=newgoogle.maps.LatLng（30.382288，-97.727447）；
变量映射选项={
真的，
动物控制：对，
滚轮：对，
禁用双击缩放：false，
缩放：13，
中心：用户中心
};
map=新的google.maps.map（mapCanvas，mapOptions）；
var customLayer=new google.maps.Data（）；
addGeoJson（jsonData）；
map.data.setStyle({
标题：“#”，
图标：图像，
地图：地图，
});
map.data.forEach（函数（特性）{
var point=new google.maps.LatLng（feature.getProperty（'coordinates'））
var mark=new google.maps.Marker({
位置:点,，
标题：“#”，
图标：图像，
地图：地图，
可拖动：错误，
动画：google.maps.animation.DROP
});
});
//customLayer.setMap（map）；
var marker=new google.maps.marker({
位置：用户中心，
标题：“你的位置”，
图标：图像，
地图：地图，
真的，
动画：google.maps.animation.DROP
});
}
google.maps.event.addDomListener（窗口'load'，init）；
var jsonData={
“t