Asp.net mvc 2 ASP.NET MVC 2和谷歌地图Javascript API版本3_Asp.net Mvc 2_Google Maps Api 3

Asp.net mvc 2 ASP.NET MVC 2和谷歌地图Javascript API版本3

asp.net-mvc-2 google-maps-api-3

Asp.net mvc 2 ASP.NET MVC 2和谷歌地图Javascript API版本3,asp.net-mvc-2,google-maps-api-3,Asp.net Mvc 2,Google Maps Api 3,不知何故，我无法在使用Google Maps Javascript API V3的ASP.NET MVC 2应用程序中使用简单的映射。我尝试了以下方法：站点。主控：除去 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 增加在 <script type="text/javascript" src

不知何故，我无法在使用Google Maps Javascript API V3的ASP.NET MVC 2应用程序中使用简单的映射。我尝试了以下方法：

站点。主控：

除去

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

增加

在

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
</style>

<script type="text/javascript">
$(function () {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});


html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
$（函数（）{
var mylatng=new google.maps.LatLng（-34.397150.644）；
变量myOptions={
缩放：8，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
});

在Views\Home\Index.aspx中，将其添加到contentplaceholder中

<div id="map_canvas"></div>

我遗漏了什么吗？

这是某种CSS问题。当GoogleMaps在map_画布中创建地图时，它会在地图上设置位置：相对CSS样式。由于某种原因，导致MVC2中的默认主文件出现问题

如果你从默认Site.Master的主体中删除所有内容，只需保留MainContent部分，如下所示，它就可以正常工作

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    </style>

    <script type="text/javascript">
    $(function () {
        var myLatlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    });
    </script>
</head>

<body>

            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>


html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
$（函数（）{
var mylatng=new google.maps.LatLng（-34.397150.644）；
变量myOptions={
缩放：8，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
});

另外，如果您将Firebug与当前使用的模板一起使用，您可以看到，当您从map_canvas元素中关闭position:relative时，它会显示出来

因此，希望这至少能让您朝着正确的方向前进。

为了子孙后代，一个封闭的div可以工作：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <h2>Visibility</h2>
        <div style="width:100%;height:100%;">
            <div id="map_canvas" style="width:1024px; height:768px;"></div>
        </div>    
</asp:Content>


可见度

是，当我使用firebut时，它会显示地图，但要关闭其属性位置：相对。但解决办法是什么呢。我已经做了和你说的一样的事情，但仍然有同样的问题

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <h2>Visibility</h2>
        <div style="width:100%;height:100%;">
            <div id="map_canvas" style="width:1024px; height:768px;"></div>
        </div>    
</asp:Content>