Fatal编程技术网
  • csharp/
  • C# 与母版页一起使用时，谷歌地图为空白

C# 与母版页一起使用时，谷歌地图为空白

c# asp.net google-maps

C# 与母版页一起使用时，谷歌地图为空白,c#,asp.net,google-maps,C#,Asp.net,Google Maps,我写了一个谷歌地图查找页面。在我引用页面使用母版页之前，一切都很好。我从母版页删除了表单标签，因为地图页上的搜索按钮是一个提交按钮。“我的页面”上的所有内容都会显示，但google map div会显示地图导航控件和徽标，但不会显示地图视觉效果 我使用以前的非母版页版本重新测试，地图显示正确。您对我缺少的内容有什么想法吗？添加母版页时，可以更改的一件事是元素ID 如果显示地图的div上有runat=“server”，则可能有问题。 您可以添加该标记，以便从代码隐藏中操作div 所以，如果我的di

我写了一个谷歌地图查找页面。在我引用页面使用母版页之前，一切都很好。我从母版页删除了表单标签，因为地图页上的搜索按钮是一个提交按钮。“我的页面”上的所有内容都会显示，但google map div会显示地图导航控件和徽标，但不会显示地图视觉效果

我使用以前的非母版页版本重新测试，地图显示正确。您对我缺少的内容有什么想法吗？

添加母版页时，可以更改的一件事是元素ID

如果显示地图的div上有
runat=“server”
，则可能有问题。 您可以添加该标记，以便从代码隐藏中操作div

所以，如果我的div看起来像这样：

<div id="gmap" runat="server"></div>

var mapDiv = '<%= gmap.ClientID %>';
var map = new GMap2(mapDiv);
如果是这样，在初始化映射时，需要获取div的ClientId。如下所示：

<div id="gmap" runat="server"></div>

var mapDiv = '<%= gmap.ClientID %>';
var map = new GMap2(mapDiv);

var-mapDiv=''；
var map=新的GMap2（mapDiv）；
加载FireFox和FireBug，开始查找javascript错误。 我发现了一个项目，你必须在地图上调用setCenter才能显示它。
此外，如果要添加标记（或图层），则必须在调用setCenter后添加标记。

最后必须强制div可见

在谷歌地图支持论坛上查看此帖子：

谢谢

请查看下面的代码并让我知道它的有用性

母版页代码（GMap.MasterPage）
GMatTest.aspx使用GMap.Master页的页面

< body onload="initialize()"  onunload="GUnload()"  >  
< form id="form1" runat="server" >
    < div >
        < asp:contentplaceholder id="ContentPlaceHolder1" runat="server" >
        < /asp:contentplaceholder >
    < /div >
    < /form >
< /body >  

< %@ 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&amp;v=2&amp;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();

        }
      }
     }

<%@Page Language=“C#”MasterPageFile=“~/MasterPages/GMap.master”AutoEventWireup=“true”
CodeFile=“GMapTest.aspx.cs”继承=“GMapTest”Title=“谷歌地图页面”%>

”
type=“text/javascript”>
这是我使用的代码。它在这里工作正常，但每当我添加母版页时，它都不会执行任何使用功能

<%@ 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&amp;v=2&amp;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&eacute; 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>


使用谷歌地图查找纬度和经度
函数加载（）{
if（GBrowserIsCompatible（））{
VarMap=新的GMap2（document.getElementById（“map”）；
addControl（新的gsmallmappcontrol（））；
addControl（新的GMapTypeControl（））；
var中心=新玻璃（48.89364,2.33739）；
地图设置中心（中心，15）；
geocoder=新的GClientGeocoder（）；
var marker=newgmarker（中心，{draggable:true}）；
添加覆盖图（标记）；
document.getElementById（“lat”）.innerHTML=center.lat（）.toFixed（6）；
document.getElementById（“lng”）.innerHTML=center.lng（）.toFixed（6）；
addListener（标记“dragend”，函数（）{
var point=marker.getPoint（）；
潘图（点）；
document.getElementById（“lat”）.innerHTML=point.lat（）.toFixed（6）；
document.getElementById（“lng”）.innerHTML=point.lng（）.toFixed（6）；
});
GEvent.addListener（映射，