以下代码是js调用百度地图并且获取您所在的地理位置经纬度的,效果如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html { height: 100%; } body { height: 50%; margin: 0px; padding: 0px; } #container { width:500px; height: 500px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> </head> <body onload="enter()"> <div id="container"> </div> <input id="lng" type="hidden" runat="server" /> <input id="lat" type="hidden" runat="server" /> <script type="text/javascript"> var province=0; var city=0; var district=0; var street=0; function enter() { if (navigator.geolocation) { //调用导航器geolocation函数 navigator.geolocation.getCurrentPosition(loand); //进入总显示函数loand,函数名由自己定 } else { alert("您的浏览器不支持地理定位");//不支持 } } function loand(position) { //主函数 var lat = position.coords.latitude;//y,纬度,通过上面的getCurrentPosition函数定位浏览器位置,从而获取地址 var lon = position.coords.longitude;//x,经度 //alert(lat); var map = new BMap.Map("container"); //初始化地图类 var point = new BMap.Point(lon,lat); //这里设置刚开始的点所在处 var gc = new BMap.Geocoder(); //初始化,Geocoder类 gc.getLocation(point, function (rs) { //getLocation函数用来解析地址信息,分别返回省市区街等 var addComp = rs.addressComponents; province = addComp.province;//获取省份 city = addComp.city;//获取城市 district = addComp.district;//区 street = addComp.street;//街 var marker = new BMap.Marker(point); //地图事件类 var opts = { width: 25, // 信息窗口宽度 height: 120, // 信息窗口高度 title: "我所在的地点:<hr />" // 信息窗口标题 ,这里声明下,可以在自己输出的信息里面嵌入html标签的 } var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:" + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".", opts); // 创建信息窗口对象,把信息在初始化 地图信息窗口类的同时写进去 marker.enableDragging(); //启用拖拽事件 marker.addEventListener("dragend", function (e) { gc.getLocation(point, function (rs) { //由于在getLocation函数返回信息之前,首先执行它下面的代码的,所以要把重新拖动后的代码放到它里面 var addComp = rs.addressComponents; province = addComp.province;//获取省份 city = addComp.city;//获取城市 district = addComp.district;//区 street = addComp.street;//街 opts = { width: 25, // 信息窗口宽度 height: 160, // 信息窗口高度 title: "现在的位置:<hr />" // 信息窗口标题 } point = new BMap.Point(e.point.lng, e.point.lat); //标记新坐标(拖拽以后的坐标) marker = new BMap.Marker(point); //事件类 infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:" + city + ";<br /><br />" + "县/区:" + district + ";" + "街道:" + street + ".<br />" + "经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts); map.openInfoWindow(infoWindow, point); //这条函数openInfoWindow是输出信息函数,传入信息类和点坐标 }) }) map.addControl(new BMap.NavigationControl()); //左上角控件 map.enableScrollWheelZoom(); //滚动放大 map.enableKeyboard(); //键盘放大 map.centerAndZoom(point, 13); //绘制地图 map.addOverlay(marker); //标记地图 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 }); } </script> </body> </html>
这里只是一个简单的地址调用,使用的使用需要在页面引入百度地图的js,自己可以在本地debugger查看页面流程就知道具体怎么根据自己的业务需求去进行修改了