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) 位于 central 的山脉中Kyrgyzstan，因此如果您没有在此缩放级别获得非常详细的地图，请不要感到惊讶。

例如，这里是微软雷德蒙德总部的坐标：var latlng = new google.maps.LatLng(47.652437, -122.132424);.

于 2013-01-27T15:43:12.000 回答