ASP.net Google地圖
[英]ASP.net Google Maps
問題描述
我正在嘗試將google map添加到ASP .Net子頁（具有母版頁）上的div中。 該地圖信息似乎已從Google加載-但我什么也看不到。 當我在Chrome中按F12鍵時，我可以看到我的div充滿了很多其他div和有關地圖的數據。
為什么我的地圖不可見？
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="CentralWebsite.Contact" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.style1
{
width: 317px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
alert("alert " + document.getElementById("map_canvas"));
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<table style="width: 100%;">
<tr>
<td class="style1">
<h1>Telephone: 01709</h1>
<h1>Address</h1>
<h3></h3>
<h3>Rotherham</h3>
<h3>South Yorkshire</h3>
<h3>S60 1PP</h3>
</td>
<td>
<div id="map_canvas" style="width:100%; height:100%">
map should go here
</div>
</td>
</tr>
</table>
</asp:Content>
我通過將其添加為主頁面正文的onload屬性來調用初始化函數，如下所示：
public partial class Contact : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl myBody = (HtmlGenericControl)Master.FindControl("myBody");
myBody.Attributes.Add("onload", "initialize()");
}
}
非常感謝
搶。
4 個解決方案
解決方案1
1 2016-09-30 12:12:03
在“母版”頁面中，您應在標簽中設置ID“ myBody”和“ Runat”服務器。
解決方案2
0 2013-12-26 07:54:28
在Web窗體 ，為了得到一個可見的地圖，我一直有兩個呼叫initialize() 並明確設置的寬度和高度map_canvas div來的像素數。 您可以通過使用F12開發人員工具或Firebug檢查div來驗證百分比導致地圖div高度等於0 px。
這段代碼顯示了一個映射div，它會隨着瀏覽器的調整而調整大小。 請注意，javascript會放入"~/bundles/gmaps"引用的文件中。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testme.aspx.cs" Inherits="drawingTools.testme" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: System.Web.Optimization.Scripts.Render("~/bundles/gmaps") %>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', myPageLoad);
</script>
</asp:PlaceHolder>
</head>
<body>
<form runat="server">
<div id="map_canvas" class="map_canvas" >
</div>
</form>
</body>
</html>
在aspx代碼中， google.maps.event.addDomListener(window, 'load', pageLoad); 窗口加載后，用於調用myPageLoad函數。 或使用JQuery $(document).ready函數來等待文檔准備好進行Google地圖初始化。
function myPageLoad() {
resize();
initialize(); // your google.map initializer
}
用於調整大小的地圖的resize()函數。 您可以根據要求進行調整。 目的是將map_canvas div的尺寸設置為100％。
function resize() {
var main = document.getElementById("map_canvas");
main.style.height = (getWindowHeight()) + "px";
main.style.width = (getWindowWidth()) + "px";
}
onresize = function () { resize(); };
javascript函數getWindowHeight()和getWindowWidth()可以從許多來源獲得，也可以編寫自己的來源。
除了社論之外，在aspx頁面上使用Google地圖也帶來了挑戰。 例如，如果不希望從按鈕控件進行回發，則除非禁用了回發，否則它將在不理想的情況下調用myPageLoad函數。
解決方案3
0 2012-01-15 11:08:41
這是因為您沒有在任何地方調用initialize() ！
在頁面加載時或在dom准備就緒時調用它，或者僅在地圖div之后調用它
<div id="map_canvas" style="width:100%; height:100%">map should go here</div>
<script>initialize();</script>
甚至在包含div映射表的末尾甚至更好
</table>
<script>initialize();</script>
解決方案4
0 2012-01-15 15:15:02
首先，看起來您正在使用具有密鑰的API的版本2。對於版本3，則不需要此密鑰。其次，我使用JQuery調用了initialize方法，而不是在代碼后面添加屬性，似乎有問題，而且我很掙扎並使其恢復正常工作。
嘗試這樣（我在本地指定了對JQuery的引用，必要時進行調整）
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
$(function () {
initialize();
});
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
alert("alert " + document.getElementById("map_canvas"));
}
</script>
此外，在CSS中，顯式設置map_canvas的高度/寬度：
#map_canvas
{
width: 300px;
height: 265px;
border:1px solid #C3C8BD;
border-radius:5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
谷歌地圖和asp.net
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.