Asp.net mvc 3 MVC 3没有'；不显示谷歌地图_Asp.net Mvc 3_Google Maps

Asp.net mvc 3 MVC 3没有'；不显示谷歌地图

asp.net-mvc-3 google-maps

Asp.net mvc 3 MVC 3没有'；不显示谷歌地图,asp.net-mvc-3,google-maps,Asp.net Mvc 3,Google Maps,我正在尝试更正一个使用谷歌地图的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

我正在尝试更正一个使用谷歌地图的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>

@{
ViewBag.Title=“MVC 3和谷歌地图”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
函数初始化（）{
var latlng=new google.maps.latlng（'40.716948'，'74.003563'）；
var options={zoom:14，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），选项）；
}
$（函数（）{
初始化（）；
});

布局视图代码：

@{ 
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>


@视图包。标题
@RenderSection（“脚本”，false）
@渲染部分（“样式”，false）
我的MVC应用程序
@Html.Partial（“\u lognPartial”）

@ActionLink（“主页”、“索引”、“主页”）
@ActionLink（“关于”、“关于”、“主页”）

@RenderBody（）

我不知道该怎么办了，请帮帮一个兄弟。

试试这样：

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


函数初始化（）{
var latlng=新的google.maps.latlng（40.716948,74.003563）；
变量选项={
缩放：14，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），选项）；
}
$（函数（）{
初始化（）；
});

注意事项：

纬度和经度指定为浮点值，而不是字符串
div的高度是
```
300px
```
，而不是
```
300%
```

还请注意，您指定的坐标（

40.716948，74.003563

）位于吉尔吉斯斯坦中部的山区，因此，如果您没有在该缩放级别获得非常详细的地图，请不要感到惊讶

例如，这里是微软总部在雷德蒙的坐标：

var latlng=new google.maps.latlng（47.652437，-122.132424）
谢谢你的提醒。我所要做的就是删除引号并将%更改为px，它就成功了。