0

我做出了 Mikey 建议不要使用 Session 的更改，但我的地图上仍然没有任何内容

我正在向我的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 回应 Mikey

这是运行时页面的来源：

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

2 回答 2

0

请通过以下链接。在这篇文章中，我将复杂的数据传递给图表 API。你可以从这篇文章中得到想法。

如何在asp.net中使用google chart[google chart]

于 2013-04-01T19:15:42.273 回答
0

似乎您在不理解它们的情况下将内容 CTRL-V-ing 到您的页面中...以下方法将使您更接近..

在您后面的代码中：

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);

    }

}
于 2013-04-01T16:49:46.343 回答