谷歌地图api实时更新与新的geojson文件 [英] google maps api real time updates with new geojson files
本文介绍了谷歌地图api实时更新与新的geojson文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过大约每3分钟传递一个新的本地geojson文件来将实时动态添加到我的地图。做到这一点的最佳方法是什么，以便它对最终用户无缝。我想阿贾克斯和或setinterval函数是答案，但我不知道从哪里开始。如果有人知道任何例子或可以提供一些建议。我非常感谢。
谢谢。
以下是我尝试使用AJAX的方法。我无法遍历geoJSON结构。不知道我做错了什么。 AJAX和JavaScript对我来说仍然是一种外国语言。
<！DOCTYPE html>
< html>
< head>
< p id =demo>坐标< / p>
< / br>
< p id =coords>坐标< / p>
< style>
html，body，#map_canvas {margin：0;填充：0;身高：100％; }
< / style>
src =https://maps.googleapis.com/maps/api/js?sensor=false& libraries = visualization，MVCObject>
< / script>
< script>
var map;
// ajax请求加载json数据
var xhr = new XMLHttpRequest（）;
xhr.open（'GET'，'json_template.json'，true）;
xhr.onload = function（）{
//
sector_callback（this.responseText）;
//console.log(xhr.responseText）;
};
xhr.send（）;
//函数在页面加载时将地图加载到body中
函数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）;
//处理geoJSON数据的函数定义
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; //为网站名称添加
var path = [];
//console.log(data）;
for（var j = 0，len2 = coords.length; j
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）;
$ b google.maps.event.addListener（polygons，'mouseover'，function（）{
var currentPolygon = this;
currentPolygon.setOptions（{// setOptions是
下的方法和属性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>
geoJSON：
< code{
type：FeatureCollection，
features：[{
type：Feature，
properties：{
Name：1_1，
Description：
，
geometry：{
type：Polygon，
坐标：[
[
[-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]
$ b $类型$ b $属性
名称： 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]
]
]
}
}]
}
code $ <$ $ p
解决方案 function sector_callback（）不接受任何参数。它应该像 function sector_callback（data）。您不能使用全局变量xhr，因为AJAX是异步的。
function sector_callback（data）{
for（var i = 0，i< data.features.length; i ++）{
var coords = data.features [i] .geometry.coordinates [0];
//...etc
I would like to add the real time dynamic to my map, by means of passing a new local geojson file about every 3 minutes. What is the best approach to do this so that it is seamless to the end-user. I am thinking ajax and or setinterval function is the answer, but I'm not sure where to begin. If anyone knows of any examples or can offer some advice. I would greatly appreciate it.
Thank you.
Here is my attempt to use AJAX. I am unable to loop over the geoJSON structure. Not sure what i ma doing wrong. AJAX and javascript is still kind of foreign to me.
<!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>
geoJSON:
{
"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]
]
]
}
}]
}
解决方案 function sector_callback() is not accepting any parameters. It should be something like function sector_callback(data). You cannot use the global variable xhr because AJAX is asynchronous.
function sector_callback(data) {
for (var i = 0, i < data.features.length ; i++) {
var coords = data.features[i].geometry.coordinates[0];
//...etc
这篇关于谷歌地图api实时更新与新的geojson文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
