js 调用百度地图，并且定位用户地址，显示省市区街，经纬度

最新推荐文章于 2022-10-31 21:58:07 发布

不倒翁不会c

最新推荐文章于 2022-10-31 21:58:07 发布

阅读量9.6k

点赞数

分类专栏： JavaScript 文章标签： js 百度地图Api

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!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 οnlοad="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>