ASP.NET MVC 2 및 Google지도 Javascript API 버전 3

Google지도 Javascript API V3을 사용하여 ASP.NET MVC 2 애플리케이션에서 작동하는 간단한지도를 어떻게 든 가져올 수 없습니다. < 머리>ASP.NET MVC 2 및 Google지도 Javascript API 버전 3

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

에

이

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

을 제거 추가

<!DOCTYPE html>

추가 된이 :

Site.Master : 나는 다음을 시도 홈 \ Index.aspx \ 뷰에서

는

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

내가 모르는 뭔가가 오전의 ContentPlaceHolder이 추가?

출처

2010-07-27 thd

일종의 CSS 문제입니다. Google지도가 map_canvas에서지도를 만들면 위치 : 상대적인 CSS 스타일이 설정됩니다. 어떤 이유로 인해 MVC2의 기본 마스터 파일에 문제가 발생합니다.

기본 Site.Master 본문에서 모든 내용을 제거하고 MainContent 섹션을 아래의 show로 그대로두면 잘 작동합니다.

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

또한 당신은 당신이 위치를 끄면 것을 알 수 있습니다 현재 사용중인 템플릿으로 방화범을 사용하는 경우 : 상대를 map_canvas 요소에서가 표시됩니다.

잘하면 적어도 올바른 방향으로 가도록하십시오.

출처

2010-07-28 02:00:17

감사합니다 - 당신이 옳다. – thd

예, 나는 firebut을 사용하여 속성 위치를 해제 할 때지도를 보여줍니다. 그러나 그것을위한 해결책은 무엇입니까. 내가 말했듯이 같은 일을했지만 여전히 같은 문제가있다. –

은 후손을 위하여, 바깥 쪽 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지도 Javascript API 버전 3

답변

관련 문제