在自己网站上调用google地图

tmuffamd

浏览: 28265 次
性别:
来自: 重庆

最近访客更多访客>>

wu1g119

AcFun

woodding2008

InJavaWeTrust

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Google

<html>
<head>
<title>Google Map API</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA6vpS801yIrtuIMuUfP_1LRSxsn5a65eZaAi_5C9z2RjNFFY5KBSBb4uXgDPOoqPTKZ5RfZHQ1HTweA&sensor=true" type="text/javascript"></script> 
            
            
<script type="text/javascript"> 

var map;  //当前的地图对象

//初始化
  function load() {
  
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById('map_canvas'));
      
      // 给地图添加内置的控件，分别为：
      // 平移及缩放控件（左上角）、比例尺控件（左下角）、缩略图控件（右下角）
      map.addControl(new GLargeMapControl());
      map.addControl(new GScaleControl());
      map.addControl(new GOverviewMapControl());
      
       // 将视图移到点的位置
      map.setCenter(new GLatLng(39.987889,116.350029), 13);
	  
	  //手动创建一个标注
	  var point = new GLatLng(39.9942100, 116.3645000); 
	  var marker=new GMarker(point);
   	 map.addOverlay(marker); 	 
	
		GEvent.addListener(marker, 'click', 
			function() {
				var div=document.createElement("div");
				div.innerHTML=document.getElementById("descs1").innerHTML;
			  marker.openInfoWindow(div);
			}
		);
		
		//当在地图单击时加入创建一个新的标注
		GEvent.addListener(map, 'click', onMapClick);
    }
  }
  
  function onMapClick(marker, point) {  
  if (marker)
    return;
  // 创建标注，并添加到链表中
  var newMarker = new GMarker(point, {draggable: true});
//  alert(point);
  map.addOverlay(newMarker);
  //为新的标注加入注释
  GEvent.addListener(newMarker, 'click', function(){onMarkerClick(newMarker,point)});
}

function onMarkerClick(marker,point) { 
  // 为气泡提示窗口创建动态 DOM 对象，这里我们用 DIV 标签
 // alert(typeof(marker)+","+typeof(point));
  var div = document.createElement('div');
  div.style.fontSize = '10.5pt';
  div.style.width = '250px';
  div.appendChild(
    document.createTextNode(document.getElementById("pDesc").value+",坐标:"+formatLatLng(point)));  //formatLatLng(point) 获取坐标的函数
    
  var hr = document.createElement('hr');
  hr.style.border = 'solid 1px #cccccc';
  div.appendChild(hr);
  
  // 创建“删除”按钮
  var lnk = document.createElement('div');
  lnk.innerHTML = "删除";
  lnk.style.color = '#0000cc';
  lnk.style.cursor = 'pointer';
  lnk.style.textDecoration = 'underline';
  
  // 为“删除”按钮添加事件处理：调用 removePoint() 并重新计算距离
  lnk.onclick =
    function() {
      map.closeInfoWindow();
      map.removeOverlay(marker);
    };
  div.appendChild(lnk);  
  // 当用户关闭气泡时 Google Map API 会自动释放该对象 
  marker.openInfoWindow(div);
}

//格式化经纬度
function formatLatLng(pt) {
 
  var latName, lngName;
  var lat = pt.lat();
  var lng = pt.lng();
  latName = lat >= 0 ? '北纬' : '南纬';
  lngName = lng >= 0 ? '东经' : '西经';

  return lngName + formatDegree(lng) + '，' 
    + latName + formatDegree(lat);
}
//格式化度数
 function formatDegree(value) {
  value = Math.abs(value);
  var v1 = Math.floor(value);
  var v2 = Math.floor((value - v1) * 60);
  var v3 = Math.round((value - v1) * 3600 % 60);
  return v1 + '°' + v2 + '\'' + v3 + '"';
}
    </script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body onLoad="load()" onUnload="GUnload()"> 
  <div>点击地图可以创建新的标注,在创建新标注前先加入注解:<br>
    <textarea id="pDesc" style="width:600px; height:50px"></textarea>
</div>
<div id="map_canvas" style="width: 1024px; height: 600px"></div> 
    
    <div id="targetDescs" style="display:none">
  <div id="descs1">
	<img src='http://www.catalogeasy.cn/images/index_r2_c3.jpg'><br><a href='http://www.catalogeasy.com'>恺亿讯捷科技有限公司</a> 联系电话：010-82381418
    </div>
</div>
</body> 

</html>