300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > HTML自动获取地址 网页中自动获取经纬度值并在地图中显示当前位置实例代码...

HTML自动获取地址 网页中自动获取经纬度值并在地图中显示当前位置实例代码...

时间:2019-10-03 02:54:57

相关推荐

HTML自动获取地址 网页中自动获取经纬度值并在地图中显示当前位置实例代码...

下面的HTML代码就是实例完整代码,如果你需要本项目完整实例代码,下载链接在文章最底部

网页中自动获取经纬度值并在地图中显示当前位置,可在地图中进行拖动选择当前位置并输出经纬度,这是项目实例代码,可参考用于你的项目中。

微信图片_2025093358.jpg

经纬度获取示例代码-

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();

});

完整项目实例代码下载

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。