下面的HTML代碼就是實例完整代碼，如果你需要本項目完整實例代碼，下載鏈接在文章最底部

網頁中自動獲取經緯度值并在地圖中顯示當前位置，可在地圖中進行拖動選擇當前位置并輸出經緯度，這是項目實例代碼，可參考用于你的項目中。

微信圖片_20201025093358.jpg

經緯度獲取示例代碼-520YM.NET

name="viewport"

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

/>

name="App-Config"

content="fullscreen=yes,useHistoryState=yes,transition=yes"

/>

#mapcontainer {

width: 100%;

height: 300px;

}

a[title="到百度地圖查看此區域"] {

display: none;

}

span[_cid="1"] {

display: none;

}

獲取當前位置經緯度并在地圖中顯示

class="nytxt1input1"

id="coordinate"

name="info[coordinate]"

type="text"

readonly=""

value="位置經緯度:"

/>

請在下方地圖選擇您的位置

class="nytxt1btn1"

id="btnsumttj"

name="dosave"

type="button"

οnclick="check_message()"

value="集源碼"

/>

var map = new BMap.Map("mapcontainer");

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

var geolocation = new BMap.Geolocation();

var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));

map.addOverlay(marker);

marker.getIcon().setSize({ width: 30, height: 40 });

var selectedPosition = point;

geolocation.getCurrentPosition(

function (r) {

if (this.getStatus() == BMAP_STATUS_SUCCESS) {

//- var mk = new BMap.Marker(r.point);

//- map.addOverlay(mk);

marker.setPosition(r.point);

map.panTo(r.point);

document.getElementById("coordinate").value =

"位置經緯度:" + r.point.lng + "," + r.point.lat;

// alert('您的位置：'+r.point.lng+','+r.point.lat);

selectedPosition = r.point;

} else {

// alert('failed'+this.getStatus());

}

},

{ enableHighAccuracy: true }

);

function showInfo(e) {

// alert(e.point.lng + ", " + e.point.lat);

marker.setPosition(e.point);

selectedPosition = e.point;

document.getElementById("coordinate").value =

"位置經緯度:" + e.point.lng + "," + e.point.lat;

}

map.addEventListener("touchend", showInfo);

map.addEventListener("touchmove", function (e) {

map.enableDragging();

});

map.addEventListener("touchend", function (e) {

map.disableDragging();

});

完整項目實例代碼下載

總結

以上是生活随笔為你收集整理的HTML自动获取地址,网页中自动获取经纬度值并在地图中显示当前位置实例代码...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。