2013-04-01 13 views
0

我所做的更改米奇建議不要使用會話,但我還沒有在我的地圖得到任何東西列表中通過從C#到asp.net和它沒有得到數據

我傳遞給我的ASP頁面的谷歌緯度多頭列表映射是這樣的:

public List<string> GetLatLonList() 
    { 
     var list = new List<string>(); 
     list.Add("43.169582 , -76.823404"); 
     list.Add("43.169133 , -76.822956"); 
     list.Add("43.169115 , -76.821818"); 
     list.Add("43.169151 , -76.820488"); 
     list.Add("43.170049 , -76.820424"); 
     return string.Join(";", list.ToArray()); 
     } 

這是我的asp.net頁面:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MultipleMarker.aspx.cs" Inherits="MultipleMarker" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 



<script type ="text/javascript"> 
    var map; var infowindow; 
    var latlons = 'System.Collections.Generic.List`1[System.String]'; 

    function InitializeMap() { 

     var latlng = new google.maps.LatLng(latlons[0]); 
     console.log("latlng:" + latlng); 
     var myOptions = 
     { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
    } 

    function markicons() { 

     InitializeMap(); 

     var ltlng = []; 

     //  ltlng.push(new google.maps.LatLng(17.22, 78.28)); 
     //  ltlng.push(new google.maps.LatLng(13.5, 79.2)); 
     //  ltlng.push(new google.maps.LatLng(15.24, 77.16)); 

     var length = latlons.length; 
     for (var i = 0; i < length; i++) { 
      console.log(latlons[i]); 
      ltlng.push(new google.maps.LatLng(latlons[i])); 
     } 

     map.setCenter(ltlng[0]); 
     for (var i = 0; i <= ltlng.length; i++) { 
      marker = new google.maps.Marker({ 
       map: map, 
       position: ltlng[i] 
      }); 

      (function (i, marker) { 

       google.maps.event.addListener(marker, 'click', function() { 

        if (!infowindow) { 
         infowindow = new google.maps.InfoWindow(); 
        } 

        infowindow.setContent("Message" + i); 

        infowindow.open(map, marker); 

       }); 

      })(i, marker); 

     } 

    } 

    window.onload = markicons; 

</script> 
<h2>Multiple Markers Demo:</h2> 
<div id ="map" 
     style="width: 80%; top: 51px; left: 32px; position: absolute; height: 80%"> 

</div> 
</asp:Content> 

我得到不到屏幕上的內容。這是一個空白的地圖。我沒有得到任何JavaScript錯誤,所以我不知道爲什麼它不起作用。

這是我第一次嘗試javascript。任何人都知道我爲什麼遇到問題?

編輯#2響應米奇

這是頁面的源代碼中運行時:

<!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><title> 

</title></head> 
<body> 
    <form method="post" action="MultipleMarker.aspx" id="form1"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZOATrmZzTn3jrg2qYoyIsT7K8EJcig29Z1QzbaXOQK0d" /> 
</div> 

    <div> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 



<script type ="text/javascript"> 
    var map; var infowindow; 
    var latlons = 'System.Collections.Generic.List`1[System.String]'; 

    function InitializeMap() { 

     var latlng = new google.maps.LatLng(latlons[0]); 
     console.log("latlng:" + latlng); 
     var myOptions = 
     { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
    } 

    function markicons() { 

     InitializeMap(); 

     var ltlng = []; 

     //  ltlng.push(new google.maps.LatLng(17.22, 78.28)); 
     //  ltlng.push(new google.maps.LatLng(13.5, 79.2)); 
     //  ltlng.push(new google.maps.LatLng(15.24, 77.16)); 

     var length = latlons.length; 
     for (var i = 0; i < length; i++) { 
      console.log(latlons[i]); 
      ltlng.push(new google.maps.LatLng(latlons[i])); 
     } 

     map.setCenter(ltlng[0]); 
     for (var i = 0; i <= ltlng.length; i++) { 
      marker = new google.maps.Marker({ 
       map: map, 
       position: ltlng[i] 
      }); 

      (function (i, marker) { 

       google.maps.event.addListener(marker, 'click', function() { 

        if (!infowindow) { 
         infowindow = new google.maps.InfoWindow(); 
        } 

        infowindow.setContent("Message" + i); 

        infowindow.open(map, marker); 

       }); 

      })(i, marker); 

     } 

    } 

    window.onload = markicons; 

</script> 
<h2>Multiple Markers Demo:</h2> 
<div id ="map" 
     style="width: 80%; top: 51px; left: 32px; position: absolute; height: 80%"> 

</div> 

    </div> 
    </form> 
</body> 
</html> 
+0

當你加載你的頁面,您可以「查看源文件」來看看你實際上輸出。另外,您不需要(也不應該使用)Session變量來執行此操作。您可以在您的代碼後面添加一個「protected string getLatLonList」方法,該方法返回要用來表示列表的字符串。您可以通過執行<%= getLatLonList()%>而不是<%= Session [「LatLonList」]%>將其插入到JavaScript中。 – mikey

+0

感謝您的信息,不知道你可以做到這一點。我已經做出了改變,但我仍然沒有在地圖上找到任何東西。 – ErocM

+0

@ErocM什麼查看源輸出?很可能C#方法沒有以javascript自身可以解釋的格式返回列表... – Mansfield

回答

0

好像你CTRL-V-ING的東西到你的網頁不理解他們...下面的方法(S)將帶給你有點接近..

在後面的代碼:

public string getLatLonList() 
{ 
     var list = new List<string>(); 
     list.Add("[43.169582 , -76.823404]"); // this is the center 
     list.Add("[43.169133 , -76.822956]"); // these are the marks 
     list.Add("[43.169115 , -76.821818]"); 
     list.Add("[43.169151 , -76.820488]"); 
     list.Add("[43.170049 , -76.820424]"); 
     return string.Join(",", list.ToArray());  
     // TODO: cache the above list so you're not always creating it.. 
     // e.g. create the list on Page_Load and simply return its string representation in this method.. 
} 

然後在你的aspx:

var latlons = [<%= getLatLonList() %>]; 
function InitializeMap() { 

    var latlng = new google.maps.LatLng(latlons[0][0], latlons[0][1]); 
    console.log("latlng:" + latlng); 

你需要調試吧..

這裏的其他javascript函數:

function markicons() { 
    InitializeMap(); 

    // TODO: ensure there at least 2 items in the latlons list... 
    for (var i = 1; i < latlons.length; i++) { 
     marker = new google.maps.Marker({ 
      map: map, 
      position: latlons[i][0], latlons[i][1] 
     }); 

     (function (i, marker) { 

      google.maps.event.addListener(marker, 'click', function() { 

       if (!infowindow) { 
        infowindow = new google.maps.InfoWindow(); 
       } 

       infowindow.setContent("Message" + i); 

       infowindow.open(map, marker); 

      }); 

     })(i, marker); 

    } 

} 
+0

關於latlons變量有些不正確。當我做'console.log(「latlng:」+ latlng);'它返回「latlng:(NaN,NaN)」。我已經更新了我的帖子。 – ErocM

+0

實際上並沒有把「var latlons ='System.Collections.Generic.List'1 [System.String]';」進入你的aspx頁面!這只是爲了突出顯示輸出到用戶頁面的內容(這是最初的問題)。我爲你更新了我的答案。 – mikey

0

請通過link.In此以下我將複雜的數據傳遞給圖表API。您可以從這篇文章中獲得創意。

How to used google chart in asp.net[google chart]

+0

我在表單中加入了',它仍然表示hdData沒有定義。 – ErocM

+0

將您的代碼放入if(!IsPostBack){...}部分 –

+0

我的頁面加載與您的頁面加載完全相同,其中hdData是在哪裏定義的? – ErocM