1

約 3 分ごとに新しいローカル geojson ファイルを渡すことによって、リアルタイム ダイナミックをマップに追加したいと考えています。エンドユーザーにとってシームレスになるようにこれを行うための最良のアプローチは何ですか。私は ajax または setinterval 関数が答えだと考えていますが、どこから始めればよいかわかりません。誰かが例を知っているか、アドバイスを提供できる場合。大変ありがたく存じます。

ありがとうございました。

これがAJAXを使用する私の試みです。geoJSON 構造をループできません。何が間違っているのかわかりません。AJAX と JavaScript は、私にはまだなじみのないものです。

   <!DOCTYPE html>
   <html>
    <head>
<p id="demo">coordinates</p>
</br>
<p id="coords">coordinates</p>
<style>
  html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
  src="https://maps.googleapis.com/maps/api/js?sensor=false&   libraries=visualization,MVCObject">
</script>
<script>
    var map;



    // ajax request to load json data
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'json_template.json', true);
    xhr.onload = function() {
    //
    sector_callback(this.responseText);
    //console.log(xhr.responseText);
    };
    xhr.send();

    // function to load map into body when page loads
    function initialize() { 
        var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668);
        var mapOptions = {
        zoom: 10,
        center: kansas_city,
        mapTypeId: google.maps.MapTypeId.TERRAIN
        };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    }

    // function definition to process the geoJSON data
    function sector_callback() {
    var bounds = new google.maps.LatLngBounds();

        //console.log(xhr.responseText);
        for (var i = 0, len = features.length; i < len; i++) {
            var coords = features[i].geometry.coordinates[0];
            siteNames = features[i].properties.Name; // added for site names
            var path = [];
                    //console.log(data);
            for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each set of coords and create a map object
                var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
                bounds.extend(pt);
                path.push(pt);

                //path.push(new google.maps.LatLng(coords[j][1], coords[j][0]));
            }

            var polygons = new google.maps.Polygon({
            path: path,
                strokeColor: "#000000",
                strokeOpacity: 0.8,
                strokeWeight: 1,
                fillColor: "#000000",
                fillOpacity: 0.35,
            map: map
            });
            createClickablePoly(polygons, siteNames);



            google.maps.event.addListener(polygons, 'mouseover', function() {
            var currentPolygon = this;

            currentPolygon.setOptions({ // setOptions is a method and properties below
                fillOpacity: 0.45,
                fillColor: "#FF0000"
                })
            });

            google.maps.event.addListener(polygons, 'mouseout', function() {
            var currentPolygon = this;
            currentPolygon.setOptions({ 
                fillOpacity: 0.35,
                fillColor: "#000000"
                })
            }); 
        }
    }


 </script>
 </head>
 <body onload="initialize()">
   <div id="map_canvas"></div>
  <h2>AJAX</h2>
   <div id="myDiv"></div>
  </body>
</html>

ジオJSON:

  {
"type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "properties": {
        "Name": "1_1",
        "Description": ""
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-94.963194, 39.316858],
                [-94.959670, 39.321990],
                [-94.959050, 39.321720],
                [-94.958460, 39.321400],
                [-94.957920, 39.321040],
                [-94.957420, 39.320640],
                [-94.956980, 39.320210],
                [-94.956250, 39.319270],
                [-94.955990, 39.318760],
                [-94.955780, 39.318240],
                [-94.955640, 39.317700],
                [-94.955570, 39.317160],
                [-94.955570, 39.316610],
                [-94.963194, 39.316858]
            ]
        ]
    }
}, {
    "type": "Feature",
    "properties": {
        "Name": "214_1",
        "Description": ""
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-94.783917, 39.083417],
                [-94.776470, 39.084670],
                [-94.776340, 39.084140],
                [-94.776290, 39.083590],
                [-94.776300, 39.083040],
                [-94.776380, 39.082500],
                [-94.776530, 39.081960],
                [-94.777020, 39.080940],
                [-94.777360, 39.080460],
                [-94.777760, 39.080000],
                [-94.778210, 39.079570],
                [-94.778710, 39.079180],
                [-94.779260, 39.078830],
                [-94.783917, 39.083417]
            ]
        ]
     }
   }]
  }
4

1 に答える 1

1

function sector_callback()パラメータを受け入れていません。のようなものにする必要がありますfunction sector_callback(data)。AJAXは非同期であるため、グローバル変数xhrを使用することはできません。

function sector_callback(data) {
        for (var i = 0, i < data.features.length ; i++) {
            var coords = data.features[i].geometry.coordinates[0];
            //...etc
于 2012-10-31T16:51:43.550 に答える