0

Google マップを使用する MVC アプリを正しくしようとしています。CodeProject からサンプル コードを取得しましたが、マップが IE、Chrome、および Firefox で表示されないようです。インデックス ビュー コード:

@{ 
ViewBag.Title = "MVC 3 and Google Maps";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
function Initialize() {
var latlng = new google.maps.LatLng('40.716948', '74.003563');
var options = { zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}

$(function () {
Initialize();
});
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">   </script>
<div id="map_canvas" style="width: 400px; height: 300%;">
</div>

レイアウト ビュー コード:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
@RenderSection("Scripts", false)
<style type="text/css"> 
        @RenderSection("Styles", false) 
    </style>
</head>
<body>
<div class="page">
    <header>
        <div id="title">
            <h1>My MVC Application</h1>
        </div>
        <div id="logindisplay">
            @Html.Partial("_LogOnPartial")
        </div>
        <nav>
            <ul id="menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </nav>
    </header>
    <section id="main">
        @RenderBody()
    </section>
    <footer>
    </footer>
</div>
</body>
</html>

もうどうしたらいいのかわからないので、兄弟を助けてください。

4

1 に答える 1

2

このようにしてみてください：

<script type="text/javascript">
    function Initialize() {
        var latlng = new google.maps.LatLng(40.716948, 74.003563);
        var options = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), options);
    }

    $(function () {
        Initialize();
    });
</script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<div id="map_canvas" style="width: 400px; height: 300px;"></div>

注意事項:

  • 緯度と経度は、文字列ではなく浮動小数点値として指定されます
  • div の高さは300pxではなく300%.

また、指定した座標 ( 40.716948, 74.003563) は中央の山にあることに注意しKyrgyzstanてください。このズーム レベルで非常に詳細なマップが表示されなくても驚かないでください。

たとえば、レドモンドにある MS 本社の座標は次のとおりvar latlng = new google.maps.LatLng(47.652437, -122.132424);です。

于 2013-01-27T15:43:12.000 に答える