如何通過使用javascript讀取文件並在第

號顯示數據

我正在研究在Google地圖上顯示某個點的代碼，並從一點到另一點製作線條。如代碼中所示，我應該輸入用戶位置，然後將用戶與其他Web服務位置連接。如何通過使用javascript讀取文件並在第

我的問題是我怎麼能讀取文本文件有經度和緯度的任何用戶，並顯示他們在地圖上，而不是手動輸入。

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編碼。誰可以給我任何關於做這種風格的建議。

這是我工作的代碼： ----------------------------------- <％ - 文件：索引創建於：2013年4月5日，下午8點59分13秒著者：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>

預先感謝

來源

2013-04-09 Bobaker Madi

在一般你不想在普通的te中存儲數據xt如果你沒有被迫這樣做。你應該使用json格式，因爲它適用於javascript並且是結構化的。

在客戶端JavaScript中通過AJAX加載外部資源。 AJAX只是在後臺發送一個HTTP請求，而無需重新加載頁面。

This線程在這裏堆棧溢出演示一個AJAX請求與原始的JavaScript。在互聯網上有無數關於AJAX的教程，一個簡單的谷歌搜索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和callback function以便在獲取結果時調用。瞭解AJAX最常見的操作是asynchronous，這一點很重要。 AJAX中的A實際上代表異步。

來源

2013-04-09 20:53:18

你可以把你的建議在代碼中，我會測試它。因爲我不熟悉AJAX和JSON – 2013-04-10 13:56:26

請參閱我的答案的編輯。 – 2013-04-11 06:03:49

感謝您所做的一切，我用另一個想法部分解決了我的問題。所以我使用switch-case，但是我需要的是讀取表單文件中有300個用戶的數據，如果我將它們一個一個地存儲在switch-case中，那是很乏味的。謝謝你的努力。 – 2013-04-23 15:38:35

如何通過使用javascript讀取文件並在第

回答

相關問題