2010.02.20——google map 01

lipeng88213

浏览: 953222 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

Google JSP HTML 浏览器工作

2010.02.20——google map 01

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Google Map</title>
	<script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"></script>    
	<script type="text/javascript">    
	function initialize(){            
		if(GBrowserIsCompatible()){//判断浏览器兼容性
			/** 一个基本的显示地图            
			//var map = new GMap2(document.getElementById("map_canvas"));  //在指定位置建立一个地图
			//map.setMapType(G_SATELLITE_MAP); //设置地图类型 G_NORMAL_MAP  
												//该地图类型（默认地图类型）显示普通的街道地图。 
												//G_SATELLITE_MAP  该地图类型显示卫星图像。 
												//G_HYBRID_MAP  该地图类型显示卫星图像上的主要街道透明层。 
			             
			//map.setCenter(new GLatLng(39.9493, 116.3975),13);//设置中心位置的地图视图  
			*/
			
			/** 随即显示10个点标注按钮
			//var map = new GMap2(document.getElementById("map_canvas"));   
			//map.setMapType(G_SATELLITE_MAP);   
			//map.setCenter(new GLatLng(39.9493, 116.3975), 20);      
			// Add 10 markers to the map at random locations      
			//var bounds = map.getBounds();  //返回能看到的地图的矩形区域的坐标    
			//var southWest = bounds.getSouthWest(); //返回矩形西南角点的坐标     
			//var northEast = bounds.getNorthEast(); //返回矩形东北角点的坐标     
			//var lngSpan = northEast.lng() - southWest.lng();      
			//var latSpan = northEast.lat() - southWest.lat();      
			//for (var i = 0; i < 10; i++) {        
				//var point = new GLatLng(southWest.lat() + latSpan * Math.random(),            
						//southWest.lng() + lngSpan * Math.random());        
				//map.addOverlay(new GMarker(point));//map.addOverlay(GOverlay)将叠加层添加到地图中  
								//GMarker 标记地图上的位置  标记对象包含 latlng（这是标记在地图中锚定的地理位置）和 icon      
				//}          
			//}  
			*/ 

			/* 一个简单的跳转
			var map = new GMap2(document.getElementById("map_canvas"));        
			map.setCenter(new GLatLng(39.9493, 116.3975), 19);        
			window.setTimeout(function(){            
				map.panTo(new GLatLng(39.927, 116.407)); // 将地图的中心点更改为指定的点        
				},2000);
			*/ 

			/*
			** 添加一些控件  简单的信息窗口和带标签的信息窗口
			**
			*/
			//var map = new GMap2(document.getElementById("map_canvas"));        
			//map.setCenter(new GLatLng(39.9493, 116.3975), 4); 
			//map.addControl(GControl) 添加控件
			//map.addControl(new GLargeMapControl());//创建带有可在四个方向平移、放大、缩小的按钮以及缩放滑块的控件。
		　　　	//map.addControl(new GMapTypeControl()); //创建一个标准地图类型控件，通过按钮在受支持地图类型之间进行选择和切换。
			//map.enableScrollWheelZoom();  //开启滚轮伸缩效果－－鼠标滚轮向前滚放大地图，反之缩小
			//在指定点处打开一个简单的信息窗口。平移地图，使得打开的信息窗口完全可见。信息窗口的内容为 DOM 节点。
			//map.openInfoWindowHtml(map.getCenter(),        
			//		document.createTextNode("Hello, world"));
			//在指定点处打开一个简单的信息窗口。平移地图，使得打开的信息窗口完全可见。信息窗口的内容为 Html 节点。
			//map.openInfoWindowHtml(map.getCenter(),        
			//		"<font color='red'>Hello World </font>");
			//在指定的点打开信息窗口，它包含地图上该点附近的近景视图。
			//map.showMapBlowup(map.getCenter());
			//在指定点处打开一个带标签的信息窗口.信息窗口的内容为 HTML 文本。
			//map.openInfoWindowTabsHtml(map.getCenter(),[new GInfoWindowTab("努力", "学习"),new GInfoWindowTab("好好", "工作")] );

			/*
			**  添加响应事件
			**  
			*/
			var map = new GMap2(document.getElementById("map_canvas"));
			map.setCenter(new GLatLng(34.6156,112.4450),13);
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.enableScrollWheelZoom();
			//结束地图视图的更改时弹出中心点坐标
			//GEvent.addListener(map,"moveend",function(){
			//		var center = map.getCenter();
			//		alert(center.toString());
			//	});
			//单击地图时弹出点击点的坐标
			GEvent.addListener(map,"click",function(overlay,latlng){
					if(latlng){
						document.getElementById("tt").value = "经度："+latlng.lng()+"纬度："+latlng.lat();
					}
				});
		}    
	}   
	</script>
</head>
<body onload = "initialize()" onunload = "GUnload()">    
	<div id="map_canvas" style="width:500px; height:500px;">    </div>
	<input type="text" id="tt" maxlength="100"/>
</body>
</html>

分享到：