js获取html填充到,js获取经纬度自动填充到文本框中的方法介绍

首先要注册百度地图API。

1、登录百度地图开放平台

注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用。

应用类型选择:“浏览器端”,应用服务全选,Referer白名单:*

点击提交。会生成一个访问应用(AK)。

AK码记下来,后面页面中要用它来引出百度地图。

2、创建html网页。部分代码如下:

纬度:经度: 地址 : 点击显示地图获取地址经纬度

3、JS代码

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.404412, 39.914714);

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('address').value = address;

}

});

addMarker(e.point);

}

效果图:

db06eab8f49c93b8da5e3bea8745397f.png

6444bf9fb042046db5e97d228c930aef.png

PS:需要注意一点的是,js代码要写在body后面。否则地显示不出来

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值