js 呼叫百度地圖，並且定位使用者地址，顯示省市區街，經緯度
阿新 • • 發佈：2019-02-14
<!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>
<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>