Question

我正致力于在Google地图上展示某些观点的代码，并从一个点到另一个点进行排序。如代码中所示，我应该输入用户位置，之后我将用户与其他作为Web服务位置的点连接起来。

我的问题是我如何阅读文本文件具有任何用户的经度和纬度，并在地图上显示它们而不是手动输入。

For example the file has data like this:

    longitude                latitude       webS1   webS2   webS3

    40.44390000000001   -79.9562         45      12       78

    37.79499999999999   -122.2193        78      69       45 

    36.0                    138.0            42      89       75 

    52.19999999999999   0.1167869        38      74       65

我需要的是这样的：

Enter user index:-----

插入用户索引后，我们可以使用此用户的经度和纬度来显示地图上的位置。还显示了webS的值。

实施例

Enter user index:1

结果应显示地图上的位置，并在页面上显示网页的值，如此

webS1=45
webS2=12
webs3=78

我是java脚本和HTML编码的新手。谁可以给我任何关于做这种风格的建议。

这是我正在处理的代码： ----------------------------------- ＆LT;％ - 文件：索引创建于：2013年4月5日，下午8:59:13 作者：Bobaker - ％GT;

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html >
<head>
<title>Show Google Map with Latitude and Longitude </title>

<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">
    function initialize() {
        var lat = document.getElementById('txtlat').value;
        var lon = document.getElementById('txtlon').value;

        var myLatlng = new google.maps.LatLng(lat, lon) // This is used to center the map to show our markers
        var mapOptions = {
            center: myLatlng,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            marker: true
        };
        var map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);
        <!--  --!>
        var userPosition=new google.maps.LatLng(lat,lon);
        var WebServicePosition1=new google.maps.LatLng(43,-98);
        var WebServicePosition2=new google.maps.LatLng(58,93);
        var WebServicePosition3=new google.maps.LatLng(-16,26);

        var myTrip1=[userPosition,WebServicePosition1];
        var myTrip2=[userPosition,WebServicePosition2];
        var myTrip3=[userPosition,WebServicePosition3];

        var flightPath1=new google.maps.Polyline({
            path:myTrip1,
            strokeColor:"#00000F",
            strokeOpacity:0.9,
            strokeWeight:3
        });
        var flightPath2=new google.maps.Polyline({
            path:myTrip2,
            strokeColor:"#ff0000",
            strokeOpacity:0.9,
            strokeWeight:3
        }); 

        var flightPath3=new google.maps.Polyline({
            path:myTrip3,
            strokeColor:"#0000FF",
            strokeOpacity:0.9,
            strokeWeight:3
        });


        flightPath1.setMap(map);
        flightPath2.setMap(map);
        flightPath3.setMap(map);

        var marker = new google.maps.Marker({
            position: myLatlng
        });
        marker.setMap(map);
    }
</script>
</head>
<body >

    <form id="form1" runat="server">
        <table >
            <tr>
                <td>Enter Latitude:</td>
                <td><input type="text" id="txtlat" value="40.44390000000001" /> </td>
            </tr>
            <tr>
                <td>Enter Longitude:</td>
                <td><input type="text" id="txtlon" value="-79.9562" /> </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="Submit" onclick="javascript:initialize()" /> </td>
            </tr>
        </table>
        <div id="mapcanvas" style="width: 500px; height: 400px">


        </div>

    </form>

</body>
</html>

提前致谢

Answer 1

通常，如果您不想这样做，则不希望以纯文本格式存储数据。你应该使用json格式，因为它适用于javascript并且是结构化的。

在客户端javascript中通过AJAX加载外部资源。 AJAX只是在后台发送HTTP请求而无需重新加载页面。

堆栈溢出中的

This线程演示了一个带有原始javascript的AJAX请求。在互联网上有无数关于AJAX的教程，对javascript AJAX request的简单谷歌搜索将为您提供大量的结果。

对于你文件的结构，我推荐这样的东西

{
    "users" : [{
        "id" : 1,
        "positions" : [{
            "longitude" :  40.44390000000001,
            "latitude"  : -79.9562,
            "webS1"     : 45,
            "webS2"     : 12,
            "webS3"     : 78 
        }]
    }]
}

然后，您可以使用JSON.parse将此文件解析为普通的javascript对象。

关于JSON的

This维基百科条目解释了语法。

编辑：因此，如果您的服务器上有某个资源，我们假设它与您的页面位于同一文件夹中，名为data.json。给定一个方法performAjaxRequest()，它将GET消息发送给资源。您可以执行以下操作。

performAjaxRequest("data.json", function(result) {
   var data = JSON.parse(result);
   //Now data will contain the .json file 
   //parsed as a javascript object
   data.users[0];//The first user
   //The first position for the first user
   data.users[0].positions[0];

}）;

performAjaxRequest的实现你必须通过阅读我关于AJAX的信息或者找到一个允许你做AJAX请求的jQuery等库来实现自己。 performAjaxRequest在获取结果时需要调用url和callback function两个参数。了解AJAX最常见的是asynchronous操作非常重要。 AJAX中的A实际上代表异步。

如何使用javascript读取文件并在页面上显示数据

1 个答案: