Html Google Maps API层不断更新GeoJSON_Html_Google Maps_Maps_Geojson

Html Google Maps API层不断更新GeoJSON

html google-maps maps

Html Google Maps API层不断更新GeoJSON,html,google-maps,maps,geojson,Html,Google Maps,Maps,Geojson,我正在做一个项目，我需要每X秒更新一个JSON文件到我的HTML页面，而不需要重新加载整个页面。我使用的是GoogleMapsAPI，我尝试加载的JSON是geoJson。目前，我的HTML页面如下所示： <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, bo

我正在做一个项目，我需要每X秒更新一个JSON文件到我的HTML页面，而不需要重新加载整个页面。我使用的是GoogleMapsAPI，我尝试加载的JSON是geoJson。目前，我的HTML页面如下所示：

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwcEjr78AKq9cTP-dPWfFSeGaJ_-CkGSA">
    </script>    
    <script src="geoJsonInputData.js"></script>
    <script>
                var map;
                var myLocation = {
                    'latitude': 38.255753,
                    'longitude': 140.836304
                };

                var myLatlng = new google.maps.LatLng(myLocation.latitude, myLocation.longitude);

                var mapOptions = {
                    zoom: 16,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP};

                function initialize() {
                    // Create a map
                    map = new google.maps.Map(document.getElementById('map-canvas'),
                            mapOptions);
                    // Load a GeoJSON 
                    map.data.addGeoJson(data);
                }
                google.maps.event.addDomListener(window, 'load', initialize);

                setInterval(refreshData, 2000);

                function refreshData( )
                {
                    var myLatlng = new google.maps.LatLng(newLocation.latitude, newLocation.longitude);
                    map.setCenter(myLatlng);
                    map.data.addGeoJson(data);
                }

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

    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>

谢谢大家!

从未听说过geoJson。那对你有什么好处吗？在我回答之前，您能告诉我geoJsonInputData.js中发生了什么吗？您现在得到的错误在第37行：newLocation未知（可能在“geoJsonInputData.js”中有意义，我不知道）。谢谢您的回答，我用文件更新了我的问题。1详细信息：它是大写S的“LineString”。但这并不能解决整个问题；第一次刷新后，我仍然看到灰色屏幕。我必须找出GeoJSON是如何工作的我认为这个问题与GeoJSON无关，因为我在这里测试了它：它是工作的。当然，我不确定……试试看，它不喜欢你发布的geoJSON。但是，当我将

Linestring

更改为

Linestring

时，一切正常。

var newLocation = {'latitude':140.836304,'longitude':38.255753};
var data ={
"type": "FeatureCollection",
 "features": [
{
"type":"Feature",
"properties": {},
"geometry":{
"type":"LineString",
"coordinates":
[[140.836304,38.255753],[140.83640400000002,38.255853],[140.83650400000002,38.255953000000005]]}
}
]
};