GMap实现代码

来源:互联网 发布:linux 读取jar文件 编辑:程序博客网 时间:2024/05/09 11:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <title>My Googel Map</title>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPHHzlkwM1BqBR_nEQeIAVhQj3ceE4HUgKrBDbUpURjZ05XGTWRROLJX8OXcBIQLbTTg1TA-gzv-MGw"
type="text/javascript"></script>
  <script language=javascript>
   function $()
   {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++)
    {
     var element = arguments[i];
     if (typeof element == 'string')
       element = document.getElementById(element);
     if (arguments.length == 1)
       return element;
     elements.push(element);
    }
    return elements;
   }

   var isIE=(navigator.appVersion.indexOf("MSIE")!=-1)?true:false;
   var dragClickX = 0;
   var dragClickY = 0;

   function catchFlyBar(ev)
   {
    ev=ev||window.event;
    var x=ev.clientX+document.body.scrollLeft;
    var y=ev.clientY+document.body.scrollTop;
    dragClickX=x-parseInt($("divFlyBar").style.left);
    dragClickY=y-parseInt($("divFlyBar").style.top);
    isIE? $("divFlyBar").setCapture():null;
    document.onmousemove = moveFlyBar;
   }

   function moveFlyBar(ev)
   {
    ev=ev||window.event;
    $("divFlyBar").style.left = ev.clientX-dragClickX+"px";
    $("divFlyBar").style.top = ev.clientY-dragClickY+"px";
   }

   function releaseFlyBar()
   {
    isIE? $("divFlyBar").releaseCapture():null;
    document.onmousemove = null;
   }

   var map = null;
   function load()
   {
    if (GBrowserIsCompatible())
    {
       map = new GMap2(document.getElementById('map'));
       marker = new GMarker(new GLatLng(31.15, 121.50));
       var html = '<div style="width: 100px;text-align:center;padding-right:10px;">'+
          '<table align=center>'+
           '<tr>'+
            '<td><a href="#">上海市</a></td>'+
           '</tr>'+
           '<tr>'+
            '<td><img src="dfmz.jpg" /></td>'+
           '</tr>'+
          '</table>'+
         '</div>'
      
      map.setCenter(new GLatLng(31.132767,121.283330), 10);
              
      map.addControl(new GSmallMapControl());
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl());
              
      map.addOverlay(marker);
      marker.openInfoWindowHtml(html);
    }
   }
     
   function btnDw_onclick()
   {
    if (GBrowserIsCompatible())
    {
       map.setMapType(G_SATELLITE_MAP);
       var marker = new GMarker(new GLatLng(31.114394,121.264457));
           
       var html = '<div style="width: 300px;padding-right:10px;">'+
          '<table>'+
           '<tr>'+
            '<td colspan="2"><a href="#">上海城市地理信息系统发展有限公司</a></td>'+
           '</tr>'+
           '<tr>'+
            '<td>上海市徐汇区宛平南路75号</td>'+
            '<td><img src="ds.jpg" /></td>'+
           '</tr>'+
          '</table>'+
         '</div>'
      
      map.setCenter(new GLatLng(31.114394,121.264457), 18);
      
      map.addOverlay(marker);
      marker.openInfoWindowHtml(html);
    }
   }


   function btnDingwei_onclick()
   {
    var address = document.getElementById('txtAddress').value;
    var geocoder = new GClientGeocoder();

    if (geocoder)
    {
     geocoder.getLatLng
     (
      address,
      function(point)
      {
       if (!point)
       {
        alert("不能解析: " + address);
       }
       else
       {
        map.setCenter(point, 16);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(address);
       }
      }
     );
    }
   }
   
  </script>
 </HEAD>

 <BODY onload="load()" onunload="GUnload()">
  <div style="margin: auto atup 20px auto; text-align:center; margin-bottom: 10px;">
   <input id="btnDw" type="button" value="定位至上海城市地理信息系统发展有限公司" language="javascript" onclick="return btnDw_onclick()" />
   <input id="txtAddress" style="width: 395px" onclick="this.select()" type="text" value="北京水立方" />
   <input id="btnDingwei" type="button" value="定位" language="javascript" onclick="return btnDingwei_onclick()" />
  </div>
  <div id="divFlyBar" onMouseDown="catchFlyBar(event)"
   onMouseUp="releaseFlyBar()"
   style='position: absolute; top: 100px; left: 200px; cursor: move; z-index: 100'>
   <table
    style="filter: alpha(opacity = 90); background-color: #9A9A9A;"
    width=192 border="0" cellspacing="1" cellpadding="0">
    <tr>
     <td>
      <table width=100% height="25" border=0 cellpadding=0 cellspacing=0>
       <tr>
        <td>
         
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr id=flyTailerTr name=flyTailerTr>
     <td id=flyTailerHolder name=flyTailerHolder
      style='color: black; font-weight: bold; font-size: 12px; font-family: Courier New;'
      align=center>
      <div id="map" style="width: 700px; height: 400px; margin: auto;"></div>
     </td>
    </tr>
   </table>
  </div>
 </BODY>
</HTML> 

原创粉丝点击