阅读谷歌地图的文本文件 [英] read text file google maps
本文介绍了阅读谷歌地图的文本文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个代表无线信号调查的文本文件。它由各自由经度，纬度和该位置的无线信号强度组成的线组成。我试图通过Javascript读取此文件，然后提取位置并在Google地图上标记它们。我设法读取文本文件，但文本内的文本无法返回到用于地图的函数之外。我会很感激任何帮助，提前致谢。这里是代码：
<！DOCTYPE html>
< html>
< head>
< style>
html，body，＃map-canvas {
height：100％;
margin：0px;
填充：0px
}
< / style>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script>
var textlines;
函数processFile（fileContent）{
var lines = fileContent.split（'\\\
'）;
回报行;
}
函数loadFile（uri）{
var r = new XMLHttpRequest（）;
r.open（'GET'，uri，true）;
r.onreadystatechange = function（）{
if（r.readyState == 4）{
textlines = processFile（r.responseText）;
}
}
r.send（null）;
返回文本行;
}
函数initialize（）{
//创建地图。
var mapOptions = {
zoom：16，
center：new google.maps.LatLng（30.623169,32.269097），
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（'map-canvas'），
mapOptions）;
var line = loadFile（'ss.txt'）;
/ * setTimeout（function（）{
// alert（textlines）;
}，100）; * /
var citymap = {};
setTimeout（function（）{
for（var i = 0; i< line.length; i ++）
{
var newline = line [i];
var segments = newline.split（'\t'）;
var dbm = segments [0];
var lat = segments [2];
var lang = segments [1];
citymap [i] = {
center：new google.maps.LatLng（lat，lang）
};
}
}，4000）;
var cityCircle;
//构建城市地图中每个值的圆。
//注意：我们将人口增加了20倍。
（城市地图中的var i）{
var populationOptions = {
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃FF0000'，
fillOpacity：0.35，
map：map，
center：citymap [ i] .center，
radius：280
};
//将此城市的圈子添加到地图中。
cityCircle = new google.maps.Circle（populationOptions）;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>
解决方案
问题是您正在进行异步调用加载文本文件，但将其视为同步文件。
不能将结果填充到全局变量中。这没有什么帮助，因为它不是变量的可见性，它是时机。
>你需要做的是加载数据文件，然后调用一个将使用该数据的函数。另外它会帮助很多使用一致和正确的缩进，所以代码更易读。
最后，我冒昧地简化了代码。所以它看起来像这样：
<！DOCTYPE html>
< html>
< head>
< style>
html，body，＃map-canvas {
height：100％;
margin：0px;
填充：0px
}
< / style>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script>
函数initialize（）{
loadFile（'ss.txt'）;
}
函数loadFile（uri）{
var r = new XMLHttpRequest（）;
r.open（'GET'，uri，true）;
r.onreadystatechange = function（）{
if（r.readyState == 4）{
var lines = r.responseText.split（'\\\
'）;
loadMap（lines）;
}
}
r.send（null）;
}
函数loadMap（lines）{
//创建地图。
var mapOptions = {
zoom：16，
center：new google.maps.LatLng（30.623169,32.269097），
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（
document.getElementById（'map-canvas'），
mapOptions
）;
for（var i = 0; i< lines.length; i ++）{
var segments = lines [i] .split（'\t'）;
var dbm = segments [0];
var lat = segments [2];
var lng = segments [1];
//构建城市地图中每个值的圆。
//注意：我们将人口增加了20倍。
var populationOptions = {
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight ：2，
fillColor：'＃FF0000'，
fillOpacity：0.35，
map：map，
center：new google.maps.LatLng（lat，lng），
radius：280
};
//将此城市的圈子添加到地图中。
var cityCircle = new google.maps.Circle（populationOptions）;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>
I have got a text file representing a wireless signal survey. It consists of lines each composed of a longitude, a latitude and the wireless signal strength in that location. I'm trying to read this file via Javascript then extract locations and mark them on Google Maps. I managed to read the text file but the text within fails to be returned outside the function to be used for the map. I'd appreciate any help, thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var textlines;
function processFile(fileContent) {
var lines= fileContent.split('\n');
return lines;
}
function loadFile(uri) {
var r = new XMLHttpRequest();
r.open('GET', uri, true);
r.onreadystatechange = function() {
if (r.readyState == 4) {
textlines = processFile(r.responseText);
}
}
r.send(null);
return textlines;
}
function initialize() {
// Create the map.
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(30.623169,32.269097),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var line=loadFile('ss.txt');
/*setTimeout(function(){
// alert(textlines);
},100);*/
var citymap = {};
setTimeout(function(){
for (var i=0;i<line.length;i++)
{
var newline=line[i];
var segments=newline.split('\t');
var dbm=segments[0];
var lat=segments[2];
var lang=segments[1];
citymap[i] = {
center: new google.maps.LatLng(lat, lang)
};
}
},4000);
var cityCircle;
// Construct the circle for each value in citymap.
// Note: We scale the population by a factor of 20.
for (var i in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[i].center,
radius: 280
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
解决方案
The problem is that you are making an asynchronous call to load the text file, but treating it as if it were synchronous.
You can't just stuff the result into a global variable. That doesn't help, because it's not the visibility of the variable that's causing trouble, it's the timing.
What you have to do instead is load the data file and then call a function that will use that data.
Also it would help a lot to use consistent and proper indentation so the code is more readable.
And finally, I took the liberty of simplifying the code a bit. So it looks like this:
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
loadFile('ss.txt');
}
function loadFile(uri) {
var r = new XMLHttpRequest();
r.open('GET', uri, true);
r.onreadystatechange = function() {
if (r.readyState == 4) {
var lines = r.responseText.split('\n');
loadMap(lines);
}
}
r.send(null);
}
function loadMap(lines) {
// Create the map.
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(30.623169,32.269097),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions
);
for( var i = 0; i < lines.length; i++ ) {
var segments = lines[i].split('\t');
var dbm = segments[0];
var lat = segments[2];
var lng = segments[1];
// Construct the circle for each value in citymap.
// Note: We scale the population by a factor of 20.
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(lat, lng),
radius: 280
};
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
这篇关于阅读谷歌地图的文本文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
