我正在编写代码，显示谷歌地图上的某个点，并从一个点到其他点绘制一条线。如代码所示，我应该输入用户位置，然后将用户与其他作为 Web 服务位置的点连接起来。
我的问题是如何读取任何用户的经度和纬度文本文件并将其显示在 map 上，而不是手动输入。
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:-----
插入用户索引后，我们可以使用该用户的经度和纬度来显示 map 上的位置。还展示了 webS 的值(value)。
示例
Enter user index:1
结果应该显示 map 上的位置并显示页面上的网站值，如下所示
webS1=45
webS2=12
webs3=78
我是 java 脚本和 HTML 编码的新手。谁可以给我关于这种风格的任何建议。
这是我正在处理的代码: ----------------------------------- <%-- 文件:索引 创建于 : 2013 年 4 月 5 日 晚上 8:59:13 作者: 博贝克 --%>
<%@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>
提前致谢
最佳答案
一般来说，如果不是被迫的话，您不想以纯文本形式存储数据。您应该使用 json 格式，因为它可以很好地与 javascript 配合使用并且是结构化的。
加载外部资源是通过 AJAX 完成的在客户端 JavaScript 中。 AJAX 只是在后台发送 HTTP 请求，而无需重新加载页面。
This堆栈溢出上的线程演示了使用原始 JavaScript 的 AJAX 请求。互联网上有无数关于 AJAX 的教程，只需在 google 上搜索 javascript AJAX request 即可获得大量结果。
对于文件的结构，我推荐这样的内容
{
"users" : [{
"id" : 1,
"positions" : [{
"longitude" : 40.44390000000001,
"latitude" : -79.9562,
"webS1" : 45,
"webS2" : 12,
"webS3" : 78
}]
}]
}
然后您可以使用 JSON.parse 将此文件解析为普通的 javascript 对象。
This 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 的信息或查找允许您执行 AJAX 请求的库(例如 jQuery)来自行实现。 performAjaxRequest 采用两个参数:url 和一个在获取结果时调用的回调函数。重要的是要了解 AJAX 最常见的是 asynchronous手术。 AJAX 中的 A 实际上代表异步。
关于javascript - 如何使用javascript读取文件并在页面上显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15912035/