2010.02.20——google map 01
2010.02.20——google map 01
index.jsp
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&v=2&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>