google map定位的简单实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=GBK">
<script type="text/javascript" src="http://ditu.google.cn?file=api&amp;v=2&amp;key=ABQIAAAACeiZsHWX3cH6DSzXsRZ4ZhSm4yWMj7VobllwgidfhRjwLCDWEBQweHG14EhKWC44KmaiwDQQEBwceQ"></script>
<script type="text/javascript">
//<![CDATA[
    var map=null;
    var geocoder = new GClientGeocoder();
    var marker=null;
 function load()
 {
    if (GBrowserIsCompatible())
  {
      map = new GMap2(document.getElementById("map"));
      //添加操纵杆
      map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());
   map.addControl(new GOverviewMapControl());
   //MAP地址初始化
      map.setCenter(new GLatLng(39.917, 116.397),8);
      //通知地图其容器大小已更改
      map.checkResize();
      //清空标记
      map.clearOverlays();
    }
 }

 function showAddress(i)
 {
     map.clearOverlays();
     var x = document.getElementById("addressX").value;
     var y = document.getElementById("addressY").value;
         //设置经纬度
     var xx = 39.917 + i;
     var yy = 116.397 + i;
     var point = new GLatLng(xx, yy); //北京
     if (x != null || y != null) {
         point = new GLatLng(x, y);
         xx = x;
         yy = y;
     }
     //test
    
    
          map.setCenter(point,8);
          marker = new GMarker(point);
          map.addOverlay(marker);
          marker.openInfoWindowHtml("横坐标:"+(xx)+"</br>纵坐标:"+(yy)+"</br><input type='button' value='查看详情' οnclick='seeCaseInfo("+(xx)+","+(yy)+");'/>");
 }
 function seeCaseInfo(x,y)
 {
  alert("横坐标为:"+x+" 纵坐标为:"+y);
 }
//]]>
    </script>
</head>
<body οnlοad="load();">
 <div id="map" style="width: 840px; height: 400px"></div>
 <br>
   <b style="color:blue"><span id="jump"> </span> 搜索</b><br>
  
   <b style="color:red;display:none" id="show">0</b><br>
  
   <span id="Span1">X:</span><input type="text" id="addressX"/>
  <span id="Span2">Y:</span> <input type="text" id="addressY"/>
    <input type="button" value="查询" οnclick="showAddress(0);"/>
  
   <script language="JavaScript">
// countDown(5);
// var i=0;
//   function countDown(secs){
//    jump.innerText=secs;
//      if((--secs)>0)
//      {
//         setTimeout( "countDown(" +secs+ ")" ,1000);
//      }
//      if(secs==0)
//      {
//          setTimeout( "countDown(5)" ,1000);
//          show.innerText=i;
//          i++;
//          if(i==10)
//              i=0;
//          showAddress(i);
//      }
//   }
</script>
</body>
</html>

 效果如下:

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值