1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 百度地图自动检索获取地理位置(经纬度)

百度地图自动检索获取地理位置(经纬度)

时间:2022-11-09 21:21:04

相关推荐

百度地图自动检索获取地理位置(经纬度)

百度地图自动检索获取地理位置,含有百度的自动检索和获取当前定位的功能!

我把这个功能单独写了一个界面,给分离了出来!假如项目中地址输入框有一些框架,这个要当心一些,定位会使索引位置发生错乱!注意改动!

自己的百度key填上去即可!测试的话网上也有一些公开的key!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>点击地图获取地址和经纬度map,address,lng,lat</title><meta name="robots" content="noindex, nofollow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!-- 将百度地图API引入,设置好自己的key --><script type="text/javascript" src="自己的百度key"></script></head><body><div class="main-div"><form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()"><table cellspacing="1" cellpadding="3" width="100%"><tr><td class="label">经度</td><td><input type="text" name="lng" id="lng" value=""/></td></tr><tr><td class="label">纬度</td><td><input type="text" name="lat" id="lat" value=""/></td></tr><tr><td class="label">地址</td><td><input type='text' value='' name='sever_add' id='sever_add'><input type='button' value='点击显示地图获取地址经纬度' id='open'></td></tr></table></form><div id='allmap' style='width: 100%; height: 100%; position: absolute; display: none'></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div></div></body><script type="text/javascript">function validate() {var sever_add = document.getElementsByName('sever_add')[0].value;if (isNull(sever_add)) {alert('请选择地址');return false;}return true;}//判断是否是空function isNull(a) {return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;}document.getElementById('open').onclick = function () {if (document.getElementById('allmap').style.display == 'none') {document.getElementById('allmap').style.display = 'block';} else {document.getElementById('allmap').style.display = 'none';}}var map = new BMap.Map("allmap");var geoc = new BMap.Geocoder(); //地址解析对象var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 12); // 中心点geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert('failed' + this.getStatus());}}, {enableHighAccuracy: true})map.addEventListener("click", showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图时间处理function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = e.point.lat;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;if (confirm("确定要地址是" + address + "?")) {document.getElementById('allmap').style.display = 'none';document.getElementById('sever_add').value = address;}});addMarker(e.point);}// ------------------------------------------------// 百度地图API功能function G(id) {return document.getElementById(id);}var ac = new BMap.Autocomplete( //建立一个自动完成的对象{"input": "sever_add", "location": map});ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel").innerHTML = str;});var myValue;ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace();});function setPlace() {map.clearOverlays(); //清除地图上所有覆盖物function myFun() {var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}</script></html>

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