ASP.NET MVC 2 et Google Maps Javascript Version 3

D'une certaine manière, je ne peux pas obtenir une simple carte pour travailler dans une application ASP.NET MVC 2 avec Google Maps Javascript API V3. Je l'ai essayé ce qui suit:ASP.NET MVC 2 et Google Maps Javascript Version 3

Site.master:

Retirées

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

Ajouté

<!DOCTYPE html>

a ajouté dans < head>

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

Dans Views \ Home \ Index.aspx, a ajouté ce dans un ContentPlaceHolder

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

Suis-je manque quelque chose?

Source

2010-07-27 thd

C'est un problème de CSS. Lorsque google maps crée la carte dans map_canvas, elle définit la position: le style CSS relatif. Pour une raison quelconque, cela cause un problème avec le fichier maître par défaut dans MVC2.

Si vous supprimez tout le contenu du site Site.Master par défaut et que vous quittez la section MainContent comme indiqué ci-dessous, cela fonctionne très bien.

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

Aussi, si vous utilisez Firebug avec le modèle que vous utilisez dès maintenant vous pouvez voir que lorsque vous mettez l'appareil hors position: relative de l'élément map_canvas il apparaît.

Donc, j'espère qu'au moins vous allez dans la bonne direction.

Source

2010-07-28 02:00:17

Merci - vous avez raison. – thd

oui c'est en me montrant la carte quand j'utilise firebut pour désactiver sa position de propriété: relative. mais quelle est la solution pour cela? J'ai fait pareil comme tu l'as dit mais toujours le même problème –

Pour l'amour de la postérité, un div englobante fonctionne:

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

Source

2012-02-12 01:58:45 nathaniel

ASP.NET MVC 2 et Google Maps Javascript Version 3

Répondre

Questions connexes