Question

我有一个代表无线信号调查的文本文件。它由线组成，每条线由经度，纬度和该位置的无线信号强度组成。我正在尝试通过Javascript读取此文件，然后提取位置并在Google地图上标记它们。我设法读取了文本文件但是其中的文本无法返回到用于地图的函数之外。我很感激任何帮助，提前谢谢。这是代码：

<!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>

Answer 1

我认为您已经返回了正确的代码，但是返回值的变量应该首先公开初始化。

Answer 2

问题是您正在进行异步调用以加载文本文件，但将其视为同步。

您不能将结果填充到全局变量中。这没有用，因为它不是引起麻烦的变量的可见性，而是时间。

您需要做的是加载数据文件，然后调用将使用该数据的函数。

使用一致且适当的缩进也会有很大帮助，因此代码更具可读性。

最后，我冒昧地简化了代码。所以它看起来像这样：

<!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>

阅读文本文件谷歌地图

2 个答案: