1

我正在研究在谷歌地图上显示某个点并从一个点到其他点的代码。如代码所示，我应该输入用户位置，然后将用户与 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

结果应该在地图上显示位置并在页面上显示 web 的值，如下所示

webS1=45
webS2=12
webs3=78

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

这是我正在处理的代码： ----------------------------------- <%-- 文档： index 创建于 : Apr 5, 2013, 8:59:13 PM 作者 : Bobaker --%>

<%@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>

提前致谢

4

1 回答 1

1

一般来说，如果您不是被迫这样做，您不希望以纯文本形式存储数据。您应该使用 json 格式，因为它适用于 javascript 并且是结构化的。

加载外部资源是通过客户端 javascript 中的AJAX完成的。AJAX 只是在后台发送一个 HTTP 请求，而不需要重新加载页面。

此处有关堆栈溢出的线程演示了使用原始 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 的维基百科条目解释了语法。

编辑：因此，如果您的服务器上某处有资源，我们假设它与您的页面位于同一文件夹中，名为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 的信息或通过查找诸如 jQuery 之类的库来实现您自己的实现，该库可以让您执行 AJAX 请求。performAjaxRequest有两个参数 theurl和 acallback function在获取结果时被调用。了解 AJAX 是最常见的异步操作很重要。AJAX 中的 A 实际上代表异步。

于 2013-04-09T20:53:18.073 回答