0

セッションを使用しないようにマイキーが提案した変更を加えましたが、まだマップに何も表示されません

次のように、Googleマップの緯度経度のリストを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>
4

2 に答える 2