ASP.NET MVC 2和Google Maps JavaScript API版本3

不知何故，我無法通過Google Maps Javascript API V3獲得一個簡單的地圖在ASP.NET MVC 2應用程序中工作。我曾嘗試以下：ASP.NET MVC 2和Google Maps JavaScript API版本3

的Site.Master：

刪除

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

新增

<!DOCTYPE html>

添加這<頭>

<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); 
});

在查看\首頁\ Index.aspx的，在的ContentPlaceHolder

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

我缺少的東西添加呢？

來源

2010-07-27 thd

這是一種CSS問題。當google maps在map_canvas中創建地圖時，它會設置位置：相對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>

此外，如果你使用Firebug與您正在使用的是現在，你可以看到，當您關閉位置的模板：從map_canvas提供元素相對於它顯示了。

所以希望至少能讓你朝正確的方向前進。

來源

2010-07-28 02:00:17

感謝 - 你是對的。 – thd 2010-08-01 15:26:05

是的，它顯示我的地圖，當我使用firebut關閉其財產狀況：相對。但是這是什麼解決方案。我已經完成了你所說的，但仍然是同樣的問題 – 2010-11-08 07:28:09

爲後人的緣故，一個封閉的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>

來源

2012-02-12 01:58:45 nathaniel

ASP.NET MVC 2和Google Maps JavaScript API版本3

回答

相關問題