google V3 简略实用 _Web前端

google V3 简单实用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
  <!--google 拉框控件-->
  <script type="text/javascript" src="keydragzoom.js"></script>
 </HEAD>
 <BODY onload='init()'>

  <div id='gmap' style="width: 800px; height: 600px">
  </div>
  <script>
	var latlng=[[31.840650970233095,117.19356549365238],
				[31.83525511970765,117.18498242480473],
				[31.84524448619277,117.18000424487309],
				[31.849546142939282,117.19356549365238]];
	var bounds=[[31.845973594676078,117.18026173693852],
				[31.83897391535159,117.16944707019047]]
	function log(str){
		document.getElementById('a').innerHTML=document.getElementById('a').innerHTML+"</br>"+str;
	}
	function mapControl(){
		this.control;
		this.infoWindwo;
		this.geoCoder;
		this.points=[];					//标点集合对象
		this.polyLine=null;				//轨迹线对象
		this.polyGon=null;				//多边形			
		this.rectangle=null;			//矩形
		this.circle=null;				//圆形
		this.overlayView=null;			//气泡框
		this.gEvent=function (){return google.maps.event;};	//google事件对象
		var temp=this;
		
		this.mapStyle=new function (){
			 //将地图的中心设置为指定的地理点 可以使用 0（最低缩放级别，在地图上可以看到整个世界）到 19（最高缩放级别，可以看到独立建筑物）之间的缩放级别
			//ROADMAP-默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图       
			this.hybrid=google.maps.MapTypeId.HYBRID;		//混合	
			this.roadmap=google.maps.MapTypeId.ROADMAP;		//路线图
			this.satellite=google.maps.MapTypeId.SATELLITE;	//卫星
			this.terrain=google.maps.MapTypeId.TERRAIN;		//地形
		}
		this.mapMenuStyle=new function (){
			this.defaultMenu =google.maps.MapTypeControlStyle.DEFAULT;			//默认样式	HORIZONTAL_BAR
			this.dropdownMenu =google.maps.MapTypeControlStyle.DROPDOWN_MENU;	//位置	
			this.horizontalBar =google.maps.MapTypeControlStyle.HORIZONTAL_BAR;	//风格
		}
		this.geocoderStatus=new function (){
			//google.maps.GeocoderStatus;
			this.error= google.maps.GeocoderStatus.ERROR;							//There was a problem contacting the Google servers.
			this.invalidRequest= google.maps.GeocoderStatus.INVALID_REQUEST;		//This GeocoderRequest was invalid.
			this.ok=  google.maps.GeocoderStatus.OK;								//The response contains a valid GeocoderResponse.
			this.overQueryLimit=  google.maps.GeocoderStatus.OVER_QUERY_LIMIT;	//The webpage has gone over the requests limit in too short a period of time.
			this.requestDenied= google.maps.GeocoderStatus.REQUEST_DENIED;		//The webpage is not allowed to use the geocoder.
			this.unknownError= google.maps.GeocoderStatus.UNKNOWN_ERROR;			//A geocoding request could not be processed due to a server error. The request may succeed if you try again.
			this.zeroResults=  google.maps.GeocoderStatus.ZERO_RESULTS;
		}
		this.initialize=function () {
			//google.maps.MapTypeControlStyle.DROPDOWN_MENU
			var mapOptions = {
				zoom: 14,    //缩放级别        
				center: new google.maps.LatLng(31.838463501293745, 117.17588437182617),
				mapTypeId: temp.mapStyle.terrain,   
				scaleControl: true,    //比例尺      
				mapTypeControl: true,          
				mapTypeControlOptions: {style: temp.mapMenuStyle.dropdownMenu}      
			}; 
			temp.control = new google.maps.Map(document.getElementById("gmap"),mapOptions);//编写 JavaScript 函数创建“map”对象
			//按shift拉框
			temp.control.enableKeyDragZoom({
				key: "shift",
				boxStyle: {
					border: "4px dashed black",
					backgroundColor: "transparent",
					opacity: 1.0
				},
				veilStyle:{
					backgroundColor: "red",
					opacity: 0.35,
					cursor: "crosshair"
				}
			});
			//拉框返回事件
			var dz = temp.control.getDragZoomObject();
			//按下shift后的事件
			//google.maps.event.addListener(dz, 'activate', function () {log('KeyDragZoom Activated');});
			//shift弹起后的事件
			//google.maps.event.addListener(dz, 'deactivate', function () {log('KeyDragZoom Deactivated');});
			//google.maps.event.addListener(dz, 'dragstart', function (latlng) {log('KeyDragZoom Started: ' + latlng);}); 
			//拉动时的经纬度
			//google.maps.event.addListener(dz, 'drag', function (startPt, endPt) {log('KeyDragZoom Dragging: ' + startPt + endPt);});   
			//最后的经纬度
			google.maps.event.addListener(dz, 'dragend', function (bnds) {
					temp.createRectangle(bnds)
					log('KeyDragZoom Ended: ' + bnds);
			});

			//点击地图创建点
			google.maps.event.addListener(temp.control, 'click', function(event) {
				temp.clearAllMapMarker();
				//temp.getAddrsText(event.latLng)
				temp.addPoint(event.latLng)
				log(event.latLng.lat()+":"+event.latLng.lng());
			});
			temp.geoCoder=temp.getGeoCoder();
			temp.infoWindwo=temp.getInfoWindow();
			

			//画线
			var xys1=[];
			var xys2=[];
			for(var i in latlng){
				var xy= temp.createLatLng(latlng[i][0],latlng[i][1]);
				xys1.push(xy);
				xys2.push(xy)
			}
			//temp.createPolyLine(xys1);
			xys2.push(xys2[0])
			//temp.createPolyGon(xys2);
			var xys3=[];
			for (var i in bounds )
			{
				var xy= temp.createLatLng(latlng[i][0],latlng[i][1]);
				xys3.push(xy)
			}
			//temp.createRectangle(temp.createLatLngBounds(xys3[0],xys3[1]))

			temp.createCircle(xys3[0],1000);
		}
		//创建一个经纬度对象
		this.createLatLng=function (lat,lng){
			return new google.maps.LatLng(lat,lng);
		}
		//矩形大小对象
		this.createLatLngBounds=function (lb,rt){
			return new google.maps.LatLngBounds(rt,lb);
		}
		this.getPointOption=function (){
			google.maps.MarkerOptions.call(this);
			return this;
		}
		this.getLatLng=function (LatLng){
			return  new google.maps.LatLng(LatLng);
		}
		//创建默认标点
		this.addPoint=function (latLng){
			//var option =temp.getPointOption();
			var markerLatLng = temp.getLatLng(latLng);
			var point=new google.maps.Marker({
				  position: latLng, 
				  map: temp.control
			});
			temp.points.push(point);
			temp.control.setCenter(latLng);
			temp.gEvent().addListener(point, "click", function(){
					temp.animation(point);
					temp.infoWindwo.open(temp.control,point);
			});

		}


		//创建图片标点
		this.addImagePoint=function (latLng){
			//MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
		}
		//动画类
		this.animation=function (marker){
			//google.maps.Animation
			 if (marker.getAnimation() != null) {
				marker.setAnimation(null);
			 } else {
				marker.setAnimation(google.maps.Animation.BOUNCE);//跳跃
			 }
		}
		//获取poi信息
		this.getAddrsText=function (latLng){
			temp.geoCoder.geocode({'location': latLng}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				 if (results[0]) {
					var address;
					address = results[0].formatted_address;
					alert(address);
				} else {
				  alert("Geocoder failed due to: " + status);
				}
			}
		  });
		}
		//画线
		this.createPolyLine=function (latLngs){
			temp.polyLine=new google.maps.Polyline({
				path:latLngs,
				map: temp.control
			 });
		}
		//画多边形
		this.createPolyGon=function (latLngs){
			//google.maps.Polygon;
			temp.polyGon=new google.maps.Polygon({
				path:latLngs,
				map: temp.control
			});
		}
		//画矩形
		this.createRectangle=function (bound){
			temp.rectangle=new google.maps.Rectangle({
				bounds:bound,
				map: temp.control
			});
			
		}
		//画圆形
		this.createCircle=function (latLng,radiu){
			//google.maps.Circle
			temp.circle=new google.maps.Circle({
				map: temp.control,
				center:latLng,
				radius:radiu
			});
		}
		//位置信息对象
		this.getGeoCoder=function (){
			return new google.maps.Geocoder();
		}
		//气泡框
		this.createOverlayView=function (){
			return new google.maps.OverlayView();
		}
		this.getInfoWindow=function (){
			return new google.maps.InfoWindow(
					{   
						size: new google.maps.Size(50,50),
						map:temp.control,
						content: "I'm here!"
						//position: location
					});
		}
		this.clearAllMapMarker=function (){
			if(temp.points!=null && temp.points.length>0){
				for(var i in temp.points){
					temp.points[i].setMap(null);				
				};
				temp.points=[];
			};
			//temp.infoWindwo.close();
		}
	}
	function init(){
		var a=new mapControl();
		a.initialize();
	}

  </script>
  <div id='a'>
	
  </div>
 </BODY>
</HTML>