Fatal编程技术网
  • javascript/
  • Javascript 阅读文本文件谷歌地图

Javascript 阅读文本文件谷歌地图

javascript google-maps

Javascript 阅读文本文件谷歌地图,javascript,google-maps,Javascript,Google Maps,我有一个代表无线信号调查的文本文件。它由线组成，每条线由经度、纬度和该位置的无线信号强度组成。我试图通过Javascript读取此文件，然后提取位置并在谷歌地图上标记它们。我设法读取了文本文件，但其中的文本无法返回到用于映射的函数之外。我非常感谢您的帮助，提前谢谢。代码如下： <!DOCTYPE html> <html> <head> <style> html, body, #map-canvas { height: 100%;

我有一个代表无线信号调查的文本文件。它由线组成，每条线由经度、纬度和该位置的无线信号强度组成。我试图通过Javascript读取此文件，然后提取位置并在谷歌地图上标记它们。我设法读取了文本文件，但其中的文本无法返回到用于映射的函数之外。我非常感谢您的帮助，提前谢谢。代码如下：

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


html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var文本行；
函数processFile（fileContent）{
var lines=fileContent.split（'\n'）；
回流线；
}
函数加载文件（uri）{
var r=新的XMLHttpRequest（）；
r、 打开（'GET'，uri，true）；
r、 onreadystatechange=函数（）{
if（r.readyState==4）{
textlines=processFile（r.responseText）；
}
}
r、 发送（空）；
返回文本行；
}
函数初始化（）{
//创建地图。
变量映射选项={
缩放：16，
中心：新google.maps.LatLng（30.623169,32.269097），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var line=loadFile（'ss.txt'）；
/*setTimeout（函数（）{
//警报（文本行）；
},100);*/
var citymap={}；
setTimeout（函数（）{

对于（var i=0；i我认为您返回了正确的代码，但返回值的变量应该首先声明为public initialize。
问题在于您正在进行异步调用以加载文本文件，但将其视为同步的

你不能只是把结果塞进一个全局变量中。这没有帮助，因为引起麻烦的不是变量的可见性，而是时间

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

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

最后，我冒昧地将代码简化了一点。它看起来是这样的：


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




html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
函数初始化（）{
加载文件（'ss.txt'）；
}
函数加载文件（uri）{
var r=新的XMLHttpRequest（）；
r、 打开（'GET'，uri，true）；
r、 onreadystatechange=函数（）{
if（r.readyState==4）{
变量行=r.responseText.split（'\n'）；
负荷图（线路）；
}
}
r、 发送（空）；
}
功能加载图（行）{
//创建地图。
变量映射选项={
缩放：16，
中心：新google.maps.LatLng（30.623169,32.269097），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(
document.getElementById（'map-canvas'），
地图选项
);
对于（var i=0；i
感谢您的回复。我已经尝试过了，但没有成功。变量文本行已经是全局的，并返回到变量行中。我尝试过使用这两种文本行，但都不起作用。非常感谢您的回复。我明白您的意思，感谢您简化了操作，但您的代码不起作用。当我调试代码时，它不会得到int如果（readyState==4），然后它就停止了。非常感谢您的帮助，但我真的非常感谢您在这个问题上提供更多的帮助。请提供您的ss的内容。TXT我不会从我的头脑中就知道XHR问题。我只会使用jQuery和
$.get（）
来简化这一部分，然后继续剩下的部分。