0
我設置了以下內容頁面來顯示英國的地圖。谷歌地圖不顯示
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Paget's Progress
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function init() {
var latlng = new google.maps.LatLng(54.0, 3.0);
var myOptions = { zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1>Paget's Progress</h1>
<p>Some text</p>
<div id="map_canvas" style="width: 724px; height: 900px">
</div>
</asp:Content>
我得到的顯示是一個灰色的矩形我期待在地圖的大小,
技術谷歌在它和
左下角
圖形
使用條款
在右下角。
任何人都可以提出爲什麼地圖本身不顯示?
@Anders:我認爲這是渲染HTML你想
<div id="map_canvas" style="width: 724px; height: 900px; position: relative; background-color: rgb(229, 227, 223);">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0; cursor: url("http://maps.gstatic.com/intl/en_ALL/mapfiles/openhand_8_8.cur"), default;">
<div style="position: absolute; left: 0px; top: 0px; display: none;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
27個相同的行刪除
img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; display: none;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
27個相同的行刪除
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 100;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 101;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 102;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 103;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 104; cursor: default;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 105;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 106;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;"></div>
</div>
</div>
<div class="gmnoprint" style="-moz-user-select: none; z-index: 0; position: absolute; left: 2px; bottom: 2px;">
<a title="Click to see this area on Google Maps" target="_blank" href="http://maps.google.com/maps?key=ABQIAAAAihNS95ryi9_-fv63nfqGXBQsyrdppXfHLgdVlrK6gMoHlhbcBxRKjxrbAMgt3y8Bqwv1UI99H0dgZw&sensor=false&mapclient=jsapi&oi=map_misc&ct=api_logo">
<img style="width: 62px; height: 30px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; cursor: pointer;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/poweredby.png">
</a>
</div>
<div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr">
<span></span>
<a class="gmnoprint terms-of-use-link" href="http://www.google.com/intl/en_ALL/help/terms_maps.html" target="_blank">Terms of Use</a>
</div>
</div>
</div>
我將你的html + javascript複製到一個靜態的html文件中,它似乎在Firefox中工作正常。你能發佈你得到的HTML嗎? –
@Anders:由於長度的原因,我已將HTML附加到原始問題的底部。這似乎是問題可能是'src =「http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png」'語句。 – xiecs
@Anders正如你所說,它完美地顯示爲一個單一的網頁。使用內容頁面時可能會遇到什麼問題? – xiecs