ASP.NET MVC 2和谷歌地图API的Javascript第3版 [英] ASP.NET MVC 2 and Google Maps Javascript API Version 3
问题描述
不知怎的，我不能得到一个简单的地图与谷歌地图Javascript API第3一个ASP.NET MVC 2应用程序。我曾尝试以下内容：
Somehow I cannot get a simple map to work in a ASP.NET MVC 2 application with Google Maps Javascript API V3. I have tried the following:
的Site.Master：
删除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
添加
<!DOCTYPE html>
本补充上述＆lt; HEAD>
Added this in < 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);
});
在的视图\\首页\\ Index.aspx的的后，加入这一场的ContentPlaceHolder
In Views\Home\Index.aspx, added this in a contentplaceholder
<div id="map_canvas"></div>
我缺少的东西吗？
Am I missing something?
推荐答案
这是某种形式的CSS问题。在谷歌地图中创建map_canvas提供地图它设置的位置：它相对的CSS样式。出于某种原因，导致在MVC2默认的主文件的问题。
It's a CSS issue of some sort. When google maps creates the map in map_canvas it sets the position: relative CSS style on it. For some reason that is causing an issue with the default master file in MVC2.
如果您从默认的Site.Master的清除体内所有的东西，刚刚离开的日程地址搜索Maincontent节作为展示其下工作得很好。
If you remove all the stuff from the body of the default Site.Master and just leave the MainContent section as show below it works just fine.
<%@ 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提供元素相对于它显示了
Also if you use Firebug with the template that you are using right now you can see that when you turn off the position: relative from the map_canvas element it shows up.
因此，希望至少让你在正确的方向前进。
So hopefully that at least gets you going in the right direction.
这篇关于ASP.NET MVC 2和谷歌地图API的Javascript第3版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
