谷歌地图使用例子
1.获取客户所选择的坐标
<!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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google 地图 JavaScript API 示例: 标记拖动事件</title> <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("zan_canvas")); var center = new GLatLng(39.917,116.397); map.setCenter(center, 14); var marker = new GMarker(center, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { var windowHtml="<span style='color:gray'>"; windowHtml=windowHtml+"纬度："+marker.getLatLng().lat()+"<br />经度："+marker.getLatLng().lng(); windowHtml=windowHtml+"</span>"; marker.openInfoWindowHtml(windowHtml); document.getElementById("lat").value=marker.getLatLng().lat(); document.getElementById("lng").value=marker.getLatLng().lng(); }); map.addOverlay(marker); map.addControl(new GSmallMapControl()); map.disableDragging()//禁用地图拖拽,默认为允许，禁止拖拽后，缩放好像自动会被禁止 map.disableDoubleClickZoom()//禁用双击缩放，默认为允许 } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="zan_canvas" style="width: 500px; height: 300px"></div> <div> 纬度：<input type="text" name="lat" id="lat" /> 经度：<input type="text" name="lng" id="lng" /> </div> <div> 做客户端程序的时候，加上form，并将input改为hidden即可 http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/examples/ </div> </body> </html> 使用以上代码，即可获得客户选择的位置经纬度，将此数值保存到数据库
2.展示客户选择的位置
<!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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google 地图 JavaScript API 示例: 信息窗口</title> <script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(39.91717540663561, 116.41757011413574), 14); map.openInfoWindow(map.getCenter(), document.createTextNode("地铁五号线，灯市口站。")); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 700px; height: 300px"></div> <div> <img src="http://ditu.google.cn/maps/api/staticmap?zoom=14&size=300x300&maptype=roadmap&mobile=true&markers=39.91717540663561,116.41757011413574&sensor=false&language=zh_CN" /> </div> </body> </html> 其它用法参考http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/examples/