程序博客网 > 网络教育毕业时间

google map定位的简单实例

来源：互联网发布：网络教育毕业时间编辑：程序博客网时间：2024/05/17 02:59

<!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&v=2&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='查看详情' onclick='seeCaseInfo("+(xx)+","+(yy)+");'/>");
}
function seeCaseInfo(x,y)
{
alert("横坐标为："+x+" 纵坐标为："+y);
}
//]]>
    </script>
</head>
<body onload="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="查询" onclick="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>

效果如下：

0 0

网络教育毕业时间

网络教育毕业时间

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子金针菇凉拌怎么做金针菇瘦肉汤的做法金针菇豆腐的做法金针菇烧烤怎么做金针菇鱼头汤的做法如何做金针菇好吃鸡蛋炒金针菇的做法金针菇能炒着吃吗金针菇排骨汤的做法黄花菜是金针菇吗金针菇可以生吃吗孕妇能不能吃金针菇金针菇鲫鱼汤的做法凉拌金针菇怎么做金针菇怎么凉拌好吃培根金针菇卷做法金针菇培根卷的做法麻辣金针菇的做法大全金针菇可以炒着吃吗金针菇西红柿鸡蛋汤剁椒蒸金针菇的做法五花肉卷金针菇的做法哺乳期能吃金针菇吗孕妇可以吃金针菇月子能吃金针菇吗韭菜炒金针菇的做法锡纸金针菇怎么做金针菇肉丝汤的做法孕妇吃金针菇好吗金针菇做法大全家常金针菇肉丸汤的做法产妇可以吃金针菇吗麻辣金针菇怎么做种植金针菇的方法肾结石能吃金针菇吗番茄汤金针菇拌黄瓜的做法冬瓜金针菇汤的做法蒜蓉粉丝蒸金针菇怎样凉拌金针菇好吃长痘痘可以吃金针菇吗