google map api用列 -

virusfu

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

最近访客更多访客>>

qisblxy

厚厚baby

evans1998

notrace

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

google map api用列

支持标记拖动，拖动记录经纬度，可通过地址信息获取经纬度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=gbk"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://ditu.google.cn/maps?file=api&v=3&key=AIzaSyAeKuo5dKfiRmBnPuky9K-fuUEWyWjiYv8&sensor=true" type="text/javascript"></script>
    <script type="text/javascript">
	var $ = function(id){
		return document.getElementById(id);
	}
	String.prototype.trim = function(){
		return this.replace(/^\s+/g,"").replace(/\s+$/g,"");
	}
	var decode = function(){
		var latLng = $("lat_lng").value.trim();
		if (latLng.indexOf(',') == -1)
		{
			alert("经纬度格式错误");
			 return {  
				lat: 0,  
				lng: 0  
			}   
		}else{	
			var s = latLng.split(',');
			 return {  
				lat: s[0],  
				lng: s[1]  
			}   
		}
	}
	//创建request对象
	var createXMLHttpRequest = function(){  
		var xmlHttp ;
        try { 
			//使用Msxml的一个版本来创建 
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
		} catch (e) {
			xmlHttp = false;  
		}
		try { 
			//使用它的另外一个对象来创建 
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
		} catch (e2) { 
			xmlHttp = false; 
		} 
		if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { 
			//创建面向其它非微软浏览器的XMLHttpRequest对象 
			xmlHttp = new XMLHttpRequest(); 
		}
		 return xmlHttp;
	}
    
	var xmlHttp ; 
	var handleStateChange = function(){
	  if(xmlHttp.readyState==4 && xmlHttp.status == 200){
		var dd = xmlHttp.responseText;
		var json = eval(dd);
	  }
	}
	var getLatLng = function(){
		var address = $('uname').value;
		var patrn= /['(' | '（'][\w\W]*[')'| '）']/ ;
		if(patrn.exec(address)){
			address = address.replace(patrn,"");
		}
		//uri解码地址
		address = encodeURI(address); 

		var url = "http://ditu.google.cn/maps/geo?output=json&oe=utf-8&q="+ address +"&key=AIzaSyAISC7Kveswljca_ezm9AGRbELDKlyYZuI&hl=zh-CN";
		xmlHttp = createXMLHttpRequest();
		xmlHttp.open("POST",url,true);
		xmlHttp.onreadystatechange = function(){
			 if(xmlHttp.readyState==4 && xmlHttp.status == 200){
				var dd = xmlHttp.responseText;
				  //var obj = eval('(' + dd + ')');
				  var obj =JSON.parse(dd);
				  var vlat = obj.Placemark[0].Point.coordinates[1] ;
				  var vlng = obj.Placemark[0].Point.coordinates[0] ;
				  var vlatlng =  vlat + "," + vlng;
				  $('lat_lng').value = vlatlng;
				   mapShow();
			  }
		};
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttp.send();
	}
	var test = function(){
		 var map = new GMap2(document.getElementById("map"));
               map.addControl(new GSmallMapControl());
               map.addControl(new GMapTypeControl());
               var latLng = decode();
			   
              // var center = new GLatLng(latLng.lat,latLng.lng );
			   var center = new GLatLng(latLng.lat,latLng.lng );
               map.setCenter(center, 13);
               var marker = new GMarker(center);

               map.addOverlay(marker);
	}
     var mapShow =  function() {
      if (GBrowserIsCompatible()) {
			var map = new GMap2($("map"));
			map.addControl(new GSmallMapControl());
			map.addControl(new GMapTypeControl());
			var latLng = decode(); 
			var center = new GLatLng(latLng.lat,latLng.lng);
			map.setCenter(center, 13);
			var marker = new GMarker(center, {draggable: true});
			 GEvent.addListener(marker, "dragend", function() {
				 $('lat_lng').value = "";
			 	var custPoint = marker.getPoint(); 
				$('lat_lng').value = custPoint.lat()+ "," + custPoint.lng();
				  marker.setImage("http://ditu.google.cn/mapfiles/marker.png");
			 });
		 
		    map.addOverlay(marker);
	 
      }
		
    }
 
    </script>
  </head>
  <body >
    <p>
	商户名称:<input type="text" name="uname" id="uname" value="" size="40" /> <input type="button" name="btn_uname" value="查询" onclick="getLatLng()"/>
	经纬度:<input type="text" name="lat_lng" id="lat_lng" value="" size="40" /> <input type="button" name="btn_lat_lng" value="查询" onclick="mapShow()" />
	</p>
	<div id="map" style="width: 800px; height: 500px"></div>
  </body>
</html>

分享到：