ASP.NET MVC 2 и Google Maps Javascript API версии 3 - PullRequest
2 голосов
/ 27 июля 2010

Почему-то я не могу заставить простую карту работать в приложении ASP.NET MVC 2 с Google Maps Javascript API V3.Я пробовал следующее:

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

в Views \ Home \ Index.aspx , добавлено это в заполнитель содержимого

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

Я что-то упустил?

Ответы [ 2 ]

1 голос
/ 28 июля 2010

Это какая-то проблема 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 он отображается.

Надеюсь, это поможет вам двигаться в правильном направлении.

0 голосов
/ 12 февраля 2012

Для потомков, вложение работ:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...