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>