Fatal编程技术网

Asp.net mvc 3 asp.net c#mvc 3中的谷歌地图

asp.net-mvc-3 google-maps c#-4.0

Asp.net mvc 3 asp.net c#mvc 3中的谷歌地图,asp.net-mvc-3,google-maps,c#-4.0,Asp.net Mvc 3,Google Maps,C# 4.0,因此，如果我没有任何布局，我可以查看谷歌地图。当我插入css设计时，它不再工作 这是我的观点的代码 @{ ViewBag.Title = "MVC 3 and Google Maps"; } @section Scripts { <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> } @section Sty

因此，如果我没有任何布局，我可以查看谷歌地图。当我插入css设计时，它不再工作

这是我的观点的代码

@{ 
    ViewBag.Title = "MVC 3 and Google Maps"; 
}

@section Scripts { 
    <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
}

@section Styles { 
    html { height: 80% } 
    body { height: 80%; margin: 0px; padding: 0px } 
    #map_canvas { height: 80% } 
}

<h2>Hello, Google Maps</h2>

<div id="map_canvas" style="width:80%; height:80%"></div>

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

@{
ViewBag.Title=“MVC 3和谷歌地图”；
}
@节脚本{
}
@节样式{
html{高度：80%}
正文{高度：80%；边距：0px；填充：0px}
#地图画布{高度：80%}
}
你好，谷歌地图
函数初始化（）{
var latlng=新的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”），选项）；
}
$（函数（）{
初始化（）；
});
下面是my_Layout.cshtml的代码

    <!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>
        @RenderBody()
        <style type="text/css"> @RenderSection("Styles", false)</style>

    </body>
    </html>


@视图包。标题
@RenderSection（“脚本”，false）
@* 
@渲染部分（“样式”，false）
*@
@RenderBody（）
@渲染部分（“样式”，false）
使用IE开发工具或Chrome Inspector并禁用样式，直到您确定是哪一个导致样式被抑制为止。手动方法是注释掉您的站点样式，直到您确定问题所在。这里是反复试验。如果你找到了罪魁祸首，请发帖。

我也遇到了类似的问题，你只需要一次调试一个CSS属性。我的原因是div最初是隐藏的，这意味着当我显示它时大小设置不正确。类似的显示问题可以通过触发谷歌地图的调整大小来解决：

    google.maps.event.trigger(myMap, 'resize');
我的问题的原因是Google地图在其他元素之前进行渲染，并使用它们的默认值来确定自己的视觉特征。触发resize事件使其重新计算可用空间。这只是一个想法。

我的程序在Mozilla Firefox中似乎不起作用，但当我在Google Chrome中打开它时，一切正常。我所做的就是点击一个按钮，在一个新的空白页面中打开谷歌地图。我想在同一个页面上查看谷歌地图：（还有其他有用的答案吗？我认为在firefox中，你需要设置地图的宽度和高度。