Google Map在项目中的运用 _Web前端

Google Map在项目中的使用

1、在这里给大家提供一个网页版的Google Map Api(英文版)，
地址：http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html；
以及附件中有一个对Google Map Api的详细解析(不是很完整)，以供大家的深入研究学习。
2、首先注册一个使用Google Map Api的key值，
地址：http://code.google.com/intl/zh-CN/apis/maps/signup.html；
【注意】它需要你先登录Google账户才能注册。
3、开发的时候需要导入Google Map Api的JS引用，使我们可以使用Google提供的一些类和方法。
<script src="http://map.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAnrLcdIsAekbSRWPABuH2xxRceoMQXzZaPPlfoncwAigryyE5sxT2R_vUmNgehHQnkfHRlG147cf
JAQ" type="text/javascript"></script>?
key值是上面注册的；v=2是表示你使用的Google MAP的版本，我这里使用的GMap2开发。
对于API密钥，还有几点需要记下来：
1、如果使用API的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了；
2、API密钥只对网站目录或者域有效，所以，虽然你是使用同一个谷歌帐号登录后注册的密钥，但是，对不同域的网页，需要用这些域分别注册不同的密钥，对于同一个域里的页面，直接拿你网站的域名注册一个，在这个域里的所有页面就可以通用这个密钥了。

引用：http://apps.hi.baidu.com/share/detail/119881

4、下面提供一个简单例子，需要用到GMap2，GMarker，GLatLng

function initialize(){
//GBrowserIsCompatible()  一般首先得判断浏览器是否支持Google maps的执行
if(GBrowserIsCompatible()){
var latlng = new GLatLng(39.9493,116.3975);   //设置坐标
//给map指定一个容器div，第二个参数设置它的一些选项，该参数是一个对象，具体属性参见Google 地图API
var map = new GMap2(document.getElementById("map_canvas"),{size:new GSize(500,300),backgroundColor:"white"}); 
map.enableScrollWheelZoom();  //设置地图可以由鼠标滚轮控制缩放(默认是不会滚动缩放)。 	 
map.setCenter(latlng,13);  //设置地图的中心为该坐标点,13为缩放级别(0-19;0 可以看到整个世界,19可以看到独立建筑物)
       
var blueIcon = new GIcon(G_DEFAULT_ICON);  //定义一个标记图片
//blueIcon.image="http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";
blueIcon.image="http://labs.google.com/ridefinder/images/mm_20_red.png";   //标记的图片样式
//blueIcon.shadow="http://labs.google.com/ridefinder/images/mm_20_shadow.png";  阴影图片
//blueIcon.iconSize=new GSize(30,30);
//blueIcon.shadowSize=new GSize(0,0);  去掉标记图片的阴影    

 //在地图上的一个标记,draggable:设置该标记可以拖动；bouncy：设置该标记落下时是否弹跳一下(其他属性参见Google 地图API)
var marker = new GMarker(latlng,{icon:blueIcon,draggable:true,bouncy:false});   
map.addOverlay(marker);   //把这个标记添加到地图上
	
//对标记或者地图进行事件处理(下面的是对标记处理)
GEvent.addListener(marker,"click",function(){   
map.setZoom(17);   //设置地图的缩放程度 
marker.openInfoWindowHtml("<span style='color:red'>这是定位的位置</span>"); //文字气球形式显示信息窗口
//map.openInfoWindowHtml(latlng,"<span style='color:red'>这是定位的位置</span>"); 上面的文字气球形式也可以这样显示
});

/*
 如果地图点击发生在叠加层上，GMap2“点击”事件会传递 overlay 和 overlaylatlng(GLatLng),
?否则只会传递它传递地图坐标的latlng
*/
GEvent.addListener(map,"click",function(overlay,latlng){
if(latlng){
var str = "<span style='color:blue'>坐标为："+latlng.lat()+","+latlng.lng()+",</br>缩放级别："+map.getZoom
()+"</span>";
map.clearOverlays();  //清除所有标记
map.addOverlay(new GMarker(latlng));
map.openInfoWindowHtml(latlng,str);
	 		 }
	 	 });
	    }
 	}

?下面是对以上地图的显示形式的改变，都可以添加到以上函数中使用，看看效果；

map.enableScrollWheelZoom();  //设置地图可以由鼠标滚轮控制缩放(默认是不会)。
//map.disableScrollWheelZoom();  设置地图不能由鼠标滚轮控制缩放(默认)。
//map.enableDoubleClickZoom();  设置可以双击缩放地图，左键双击为放大，右键双击为缩小（默认）。
//map.disableDoubleClickZoom();  禁止双击缩放地图
//map.disableDragging();  禁止拖拽地图到新的位置
//map.setMapType(G_SATELLITE_MAP);   直接设置地图的显示形式（如：卫星显示）
/*
 标准地图类型有四种(第四种不知道啥意思)：
?G_NORMAL_MAP- 默认视图
?G_SATELLITE_MAP - 显示 Google 地球卫星图像
?G_HYBRID_MAP - 混合显示普通视图和卫星视图
?G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用
*/

下面是添加控件的
map.addControl(new GLargeMapControl());  //Google 地图上使用的大平移/缩放控件
//map.addControl(new GSmallMapControl());  Google 地图上使用的小一点的平移/缩放控件
map.addControl(new GMapTypeControl());   //用户切换地图类型（例如“地图”和“卫星”,以及混合地图）的按钮
map.addControl(new GScaleControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(5,20)));   //显示地图的比例尺
//位于屏幕一角的可折叠概览地图,在这里通过GControlPosition设置了它的位置[所有的控件都可以设置位置,我发现开始的时候它还在默认
的右下方，当你点击缩小的时候才会跑到你指定的位置（很郁闷）,其他的控件没有问题]、	 		
//map.addControl(new GOverviewMapControl(),new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(30,30)));

?你也可以根据详细地址在地图上定位到位置（不过貌似有点慢）；

//根据地址显示位置
function showAddress(address){
 	var map_canvas = new GMap2(document.getElementById("map_can"),{size:new GSize(500,300)});
 	var geocoder = new GClientGeocoder();
 	geocoder.getLatLng(address,function(point){
 	if(!point){
 		alert("无法解析该地址");
 	}else{
 		map_canvas.setCenter(point,point);
 		var mark = new GMarker(point);
 		map_canvas.addOverlay(mark);
 		mark.openInfoWindowHtml(address);
 		}
 	    });
 	}

?接下来就是简简单单的HTML页面了；

<!-- 在 Google Maps 中，GUnload()可以消除几乎所有的 IE 内存泄漏 -->
  <body onload="initialize();" onunload="GUnload();">
	<div id="map_canvas" style="width:400px;height:300px">
	     正在加载地图中....
	</div>
	查询的地址：<input name="ss" value="" onblur="showAddress(this.value);">
	<div id="map_can"></div>
  </body>