多種標記示例使用CSV

-2

Google Maps JS API v3 - Simple Multiple Marker Example 多種標記示例使用CSV

你能幫助的人怎麼辦谷歌地圖JS API V3 - 使用CSV像從它得到的座標上述簡單多個標記。

2014-04-17 user3543916

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Multiple Marker</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js" type="application/javascript"></script> 
     // change key of google map in key parameter 
     <script src="http://maps.googleapis.com/maps/api/js?key=key&sensor=false"></script> 
     <script> 
      $(document).ready(function(){ 
       var markers = []; // define global array in script tag so you can use it in whole page  
       var myCenter=new google.maps.LatLng(22.582365,79.848633); 
       var mapProp = { 
         center:myCenter, 
         zoom:6, 
         minZoom:6,   
         mapTypeId : google.maps.MapTypeId.ROADMAP, 
         mapTypeControl: true   
        }; 
       //google map object  
       var map = new google.maps.Map(document.getElementById("gMap"),mapProp); 

        //change event of input tag where type=file and id=filename 
        $("#filename").change(function(e) { 

        var ext = $("input#filename").val().split(".").pop().toLowerCase(); 

        if($.inArray(ext, ["csv"]) == -1) { 
          alert('Upload CSV'); 
          return false; 
         } 

        if (e.target.files != undefined) { 

          var reader = new FileReader(); 
          reader.onload = function(e) { 

             var csvval=e.target.result.split("\n"); 
             var csvvalue;           

             for(var i = 0;i < csvval.length;i++) 
             { 
               markers[i] = []; 
               csvvalue = csvval[i].split(","); 
               markers[i][0] = csvvalue[0]; //id 
               var lat = csvvalue[1]; //latitude 
               var lng = csvvalue[2]; //longitude 
               markers[i][1] = new google.maps.Marker({ 
                position: new google.maps.LatLng(lat,lng), 
                map: map     
               }); 
             } 

          }; 
          reader.readAsText(e.target.files.item(0)); 
         } 

        return false; 

        }); 
      }); 
     </script> 
     </head> 

     <body> 
      <div style="width:1000px;height:600px;" id="gMap"> 
      </div> 
      <input type="file" id="filename" name="filename"/> 
     </body> 
     </html> 

csv file will be like 

1,22.582365,79.848633 
2,29.862893,77.8973 
3,23.01034,72.517397 
4,29.134187,79.125107 

file must have csv extention , having no spaces

來源

2014-04-17 06:18:11 Niyati

能否請你給我一個清晰的畫面充分利用樣本CSV文件，完整的代碼與所有的HTML標籤 – user3543916

再次檢查我的答案我在這裏添加了完整的頁面只改變谷歌地圖的關鍵 – Niyati

可它沒有這個做上傳概念？直接獲取值並繪製它？ – user3543916

多種標記示例使用CSV

回答

相關問題