2
我写了谷歌地图查找页面。 Everthing正常工作，直到我引用页面以使用母版页。我从地图页面上的搜索按钮是一个提交按钮，从主页面中删除表单标签。我的网页上的其他所有内容都会显示，但Google地图div会显示地图导航控件和徽标，但不会显示地图视觉效果。谷歌地图空白当与主页面
我重新测试了以前的非母版页版本，并且地图显示正确。有什么想法，我失踪了？
A
回答
1
请查看下面的代码，让我知道它的有用...
母版代码（GMap.master页）
< body onload="initialize()" onunload="GUnload()" >
< form id="form1" runat="server" >
<div>
< asp:contentplaceholder id="ContentPlaceHolder1" runat="server" >
</asp:contentplaceholder>
</div>
</form>
</body>
GMatTest.aspx网页，其中使用GMap.Master页
< %@ Page Language="C#" MasterPageFile="~/MasterPages/GMap.master" AutoEventWireup="true"
CodeFile="GMapTest.aspx.cs" Inherits="GMapTest" Title="Google Map Page" % >
< asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server" >
< script src="http://maps.google.com/maps?file=api&v=2&key=< % = AppConfig.GoogleMapApiKey % >"
type="text/javascript" ></script>
< script type="text/javascript" >
var map = null;
var geocoder = null;
var latsgn = 1;
var lgsgn = 1;
var zm = 0;
var marker = null;
function initialize()
{
if (GBrowserIsCompatible())
{
var latitude= "";
var longitude= "";
map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(0,0);
map.setCenter(center, 17);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
map.enableDoubleClickZoom();
marker = new GMarker(center,{draggable: true});
geocoder = new GClientGeocoder();
GEvent.addListener(marker, "dragend", function() {
var point = marker.getLatLng();
marker.openInfoWindowHtml("Latitude: " + point.y + "</br> Longitude: " + point.x );
});
GEvent.addListener(marker, "click", function() {
var point = marker.getLatLng();
});
map.addOverlay(marker);
GEvent.trigger(marker, "click");
if (latitude > 0 && longitude > 0)
{
}
else
{
showAddress();
}
}
}
下面porsion是继续，请复制它也
function showAddress()
{
var isAddressFound=false;
var companyAddress = '';
var address='satyam mall, vastrapur, ahmedabad, gujrat, india';
if (geocoder)
{
geocoder.getLatLng(address,function(point) {
if (!point) {
alert(address + " not found");
} else {
isAddressFound =true;
map.setCenter(point,17);
zm = 1;
marker.setPoint(point);
GEvent.trigger(marker, "click");
}
}
);
//If address not found then redirect to company address
if(!isAddressFound)
{
geocoder.getLatLng(companyAddress,
function(point) {
if (!point) {
} else {
isAddressFound =true;
map.setCenter(point,17);
zm = 1;
marker.setPoint(point);
GEvent.trigger(marker, "click");
}
}
);
}
}
}
</script>
< div id="map_canvas" style="width: 100%; height: 425px" >
</div>
</asp:Content>
0
添加母版页时可以更改的一件事是您的元素ID。
如果你正在显示地图的div上有runat="server"，你可能会遇到问题。 您可以添加该标签，以便从代码隐藏中操纵div。
所以，如果我的股利如下：
<div id="gmap" runat="server"></div>
如果是这样，当你初始化你的地图，你需要得到div的客户端Id。这看起来像这样：
var mapDiv = '<%= gmap.ClientID %>';
var map = new GMap2(mapDiv);
0
加载FireFox和FireBug，开始寻找JavaScript错误。 我发现的一个项目，您必须在地图上调用setCenter才能显示。 另外，如果您要添加标记（或图层），则必须在调用setCenter之后添加标记。
0
最后不得不强制股利可见
查看谷歌地图支持论坛的主题：
谢谢！
1
这是我的代码used.it工作正常，在这里，但每当我添加母版页它不执行任何使用功能
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Find latitude and longitude with Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAPkZq56tNYNmeuZjNQQ2p3hT0NZP-HbfQNNfWb9Z5SLbjZKYKwBTrGBqtttFmF2d-kWv2B2nqW_NyEQ"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(48.89364, 2.33739);
map.setCenter(center, 15);
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(6);
document.getElementById("lng").innerHTML = center.lng().toFixed(6);
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(6);
document.getElementById("lng").innerHTML = point.lng().toFixed(6);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(6);
document.getElementById("lng").innerHTML = center.lng().toFixed(6);
GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(6);
document.getElementById("lng").innerHTML = point.lng().toFixed(6);
});
});
}
}
function showAddress(address) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
document.getElementById("lat").innerHTML = point.lat().toFixed(6);
document.getElementById("lng").innerHTML = point.lng().toFixed(6);
map.clearOverlays()
map.setCenter(point, 14);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(6);
document.getElementById("lng").innerHTML = pt.lng().toFixed(6);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(6);
document.getElementById("lng").innerHTML = center.lng().toFixed(6);
GEvent.addListener(marker, "dragend", function() {
var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").innerHTML = pt.lat().toFixed(6);
document.getElementById("lng").innerHTML = pt.lng().toFixed(6);
});
});
}
}
);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()" >
<p>This page uses the Google Maps API to find out accurate geographical coordinates (latitude and longitude) for any place on Earth. <br/>It provides two ways to search, either by moving around the map and zooming in, or by typing an address if the place is unknown.<br/>
<i>
<p> The default location and address are those of Mondeca office in Paris.<br />
<p><b> Find coordinates by moving around the map</b></p> <p>1. Drag and drop the map to broad location. <br/>
2. Zoom in for greater accuracy. <br/>
3. Drag and drop the marker to pinpoint the place. The coordinates are refreshed at the end of each move. </p>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="3 cité Nollez Paris France" />
<input type="submit" value="Search!" />
</p>
</form>
<p align="left">
<table bgcolor="#FFFFCC" width="300">
<tr>
<td width="100"><b>Latitude</b></td>
<td id="lat"></td>
</tr>
<tr>
<td width="100"><b>Longitude</b></td>
<td id="lng"></td>
</tr>
</table>
</p>
<p>
<div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
</p>
</body>
</html>
0
我使用的代码是
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<META NAME="AUTHOR" CONTENT="Rakshith Krishnappa">
<META NAME="DESCRIPTION" CONTENT="KML Tool - Get Latitude and Longitude for KML Polyline">
<META NAME="KEYWORDS" CONTENT="Google, maps, mashup, tools, kml, polyline">
<META NAME="ROBOTS" CONTENT="ALL">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Mapmash | Geocoder Tool | Geocode - Reverse Geocode - IP Geocode</title>
<%--<style type="text/css">
<!--
html {
height: 100%; width:100%;overflow:hidden;
}
body {
background-color: white;
font-family: Arial, sans-serif;
font-size:10pt
}
h1 {
font-size: 18pt;
}
#map {
height: 100%;
}
#hand_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
}
#hand_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
}
#placemark_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
}
#placemark_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
}
#line_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
}
#line_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
}
#shape_b {
width:31px;
height:31px;
background-image: url(http://google.com/mapfiles/ms/t/Bpu.png);
}
#shape_b.selected {
background-image: url(http://google.com/mapfiles/ms/t/Bpd.png);
}
-->
</style>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>--%>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAPkZq56tNYNmeuZjNQQ2p3hT0NZP-HbfQNNfWb9Z5SLbjZKYKwBTrGBqtttFmF2d-kWv2B2nqW_NyEQ"></script>
<script type="text/javascript">
google.load("maps", "2");
</script>
<script src="dragzoom.js" type="text/javascript"></script>
<script src="http://adserver.lat49.com/lat49/v0.10/lat49.js" type="text/javascript"></script>
<!-- Start of Google Analytics Code -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2417064-1";
urchinTracker();
</script>
<!-- End of Google Analytics Code -->
<script type="text/javascript">
//<![CDATA[
//rakf1 modified code taken from these 2 sources: - http://www.gorissen.info/Pierre/maps/googleMapLocationv4.php and - Distance Measurement Tool - Google Mapplets
// argItems code taken from
// http://www.evolt.org/article/Javascript_to_Parse_URLs_in_the_Browser/17/14435/?format=print
var map;
var coordinates = '';
var geocoder = new GClientGeocoder();
var added = 0;
var marker;
function write_point() {
var position = marker.getPoint();
var lat = position.y.toFixed(6);
var lng = position.x.toFixed(6);
coordinates = lng + "," + lat + "\n";
document.getElementById("attribute").value = 'lat="'+lat+'" lng="'+lng+'"';
document.getElementById("latlng").value = '<lat>'+lat+'</lat>\n<lng>'+lng+'</lng>';
document.getElementById("kml").value = lng+','+lat;
document.getElementById("coord").value = marker.getPoint().toUrlValue();
}
function get_address1() {
GEvent.addListener(marker, "click", function(){
var position = marker.getPoint();
var lat = position.y.toFixed(6);
var lng = position.x.toFixed(6);
var html = 'FreeReverseGeo.com (~address):<br><iframe id="RSIFrame" name="RSIFrame" style="overflow:hidden; width:200px; height:55px; border: 1px" src="http://www.freereversegeo.com/gmap-api.php?lat_1=' + lat + '&lng_1=' + lng + '"></iframe><br>('+lat+','+lng+')';
marker.openInfoWindowHtml(html);
});
}
function get_address() {
GEvent.addListener(marker, "click", function(){
var position = marker.getPoint();
geocoder.getLocations(position, function(addresses) {
if(addresses.Status.code != 200) {
marker.openInfoWindowHtml("<b>Google Reverse Geocode:</b><br>Reverse geocoder failed to find an address for " + position.toUrlValue());
}
else {
address = addresses.Placemark[0];
var html = address.address;
marker.openInfoWindowHtml("<b>Google Reverse Geocode:</b><br>"+html);
}
});
});
}
function my_location() {
if (google.loader.ClientLocation) {
var cl = google.loader.ClientLocation;
var html = 'Google ClientLocation: <br><font size="+1">' + cl.address.city + ', ' + cl.address.region+ '<br> ' + cl.address.country+'</font><br>('+cl.latitude+','+cl.longitude+')';
var point = new GLatLng(cl.latitude, cl.longitude);
if(!marker) {
map.setZoom(12);
marker = new GMarker(point,{title: "Click to get address", draggable: true});
map.addOverlay(marker);
added = 1;
}
map.setCenter(point);
marker.setPoint(point);
marker.openInfoWindowHtml(html);
}
}
function draw_point() {
GEvent.addListener(map, 'click', function(overlay, point) {
if (point && !added) {
marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, title: "Click to get address"});
map.addOverlay(marker);
added = 1;
GEvent.addListener(marker, "dragend", function(){
write_point();
});
}
else if (point && added) {
marker.setPoint(point);
}
write_point();
get_address();
});
}
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 11);
if(!marker) {
marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, title: "Click to get address"});
map.addOverlay(marker);
get_address();
added = 1;
}
marker.setPoint(point);
write_point();
}
}
);
}
function showLat49Ads(){
Lat49.initAds(19);
var center = map.getCenter();
var lat = center.lat();
var lng = center.lng();
var zoomlevel = Lat49.Tile.convertGMap2Zoom(map.getZoom());
Lat49.updateAdByLatLon("lat49ads", lat, lng, zoomlevel);
}
function load(){
map = new GMap2(document.getElementById("map"),{draggableCursor: 'crosshair', draggingCursor: 'crosshair'});
map.addControl(new GSmallZoomControl());
map.addControl(new GMenuMapTypeControl(),new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(61,7)));
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GOverviewMapControl());
var boxStyleOpts = { opacity: .2, border: "2px solid yellow" };
var otherOpts = {
buttonHTML: "<img src='zoom-control-inactive1.png' title='Drag Zoom' />",
buttonZoomingHTML: "<img src='zoom-control-active1.png' title='Drag Zoom: Cancel' />",
buttonStartingStyle: {width: '15px', height: '15px'},
overlayRemoveTime: 0 };
map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(25,7)));
map.setCenter(new GLatLng(37.35, -121.93), 12);
draw_point();
showLat49Ads();
GEvent.addListener(map, "moveend", showLat49Ads);
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<table width="100%" height="100%" style="width:100%; height:100%">
<tr style="vertical-align:top">
<td style="width:320px">
<table><tr>
</tr></table>
</td>
<td>
</td>
<td align="right">
<nobr>
<form action="#" onsubmit="showAddress(this.address.value); return false">
<input type="text" size="30" name="address" value="Chicago, IL" />
<input type="submit" value="Go!" />
</form>
</nobr>
</td>
</tr>
<tr>
<td valign="top">
<div style="width:300px;font-size:8pt"><h1>GeoCoder</h1>Click on the map or search a place to add a marker and drag marker around to get marker position coordinates. Click on marker to get approximate address.</div>
<br><span style="font-size:8pt"><b>Coordinates (lat, lng):</b> [for GLatLng]</span><br>
<input type="text" size="30" id="coord" onclick="this.select()"/>
<br><br><span style="font-size:8pt"><b>Coordinates (lng, lat):</b> [for KML]</span><br>
<input type="text" size="30" id="kml" onclick="this.select()"/>
<br><br><span style="font-size:8pt"><b>Coordinates (lat="x.xx" lng="x.xx"):</b></span><br>
<input type="text" size="30" id="attribute" onclick="this.select()"/>
<br><br><span style="font-size:8pt"><b>Coordinates (<lat> <lng>):</b></span><br>
<textarea rows="2" cols="24" id="latlng" onclick="this.select()" ></textarea>
<br>
<br>
<script type="text/javascript"><!--
google_ad_client = "pub-2773616400896769";
/* maptools_300x250_01 */
google_ad_slot = "1034665593";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td colspan="2" width="100%" height="100%">
<div style="position:relative;width:100%;height:100%">
<div id="lat49ads" lat49adposition="top-right"
style="position:absolute;top:7px; right:4px; width:125px; height:133;z-index:99999;"></div>
<div id="map" style="width:100%;height:400px;min-height:400px;border:1px solid #999;"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
如果有人对我之前发布的代码有任何想法，请发表评论。
谢谢
1
这是上面提到的同样的问题。当我使用母版页时，没有绘制谷歌地图。我稍后找到解决方案。
您需要在.aspx页面中调用Javascript函数，您希望显示谷歌地图（如initialize();）可能与您的情况不同。
代码在我的情况：
<script type="text/javascript"">
window.onload = function() {
DrawGoogleMap();
}
function DrawGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("GoogleMap_Div"));
geocoder = new GClientGeocoder();
GService.GetGoogleObject(fGetGoogleObject);
}
}
</script>
相关问题
- 1. 谷歌地图API：空白页面（没有地图）
- 2. Android谷歌地图空白
- 3. 谷歌地图渲染空白地图
- 4. 看到与谷歌空白页地图API
- 5. 谷歌地图。空白图片
- 6. 安卓空白页上的谷歌地图（白色）
- 7. 谷歌地图Api空白屏幕
- 8. 谷歌地图中的空白活动
- 9. 谷歌地图中的空白广场
- 10. 空白屏幕谷歌地图API V3
- 11. 谷歌地图空白屏幕
- 12. 离子2空白谷歌地图
- 13. 谷歌地图V2空白屏幕
- 14. 谷歌地图api V3什么都不显示，空白页
- 15. 谷歌地图：在图形页面
- 16. Ionic 2与谷歌地图 - 空白屏幕出现
- 17. 谷歌地图集成与Salesforce是空白
- 18. Magento订单 - >谷歌网站地图...因为最近一个空白页面？
- 19. 谷歌地图API，使用KML文件，地图是空白
- 20. 谷歌地图 - 如何得到一个空白的地图
- 21. 科尔多瓦谷歌地图安卓空白地图
- 22. 谷歌地图突然停止工作（空白地图）
- 23. 差异黑/白谷歌地图页面浏览量和地图加载量
- 24. 使用谷歌地图插件与科尔多瓦显示空白地图
- 25. 谷歌地图js api。页面
- 26. 如何捕捉谷歌地图页面？
- 27. 谷歌地图不会显示在ASP.NET主页面
- 28. 谷歌搜索返回空白页
- 29. Android空白空间上的谷歌地图
- 30. 谷歌地图API - 调整大小生成空白空间
你可以提供一个代码示例？ – configurator 2008-12-18 18:52:11
很想去但它不适合。我在http://blog.donnfelker.com/post/HOWTO-Build-a-Store-Locator-in-ASPNET.aspx使用Donn Felkers商店定位器 – 2008-12-29 21:26:33