Home > Article > Web Front-end > Introduction to the method of automatically filling the longitude and latitude into the text box using js
First you need to register Baidu Map API.
Register an account, complete the information, click on the "API Console" in the upper right corner of the website, and click to create an application.
Select application type: "Browser", select all application services, Referer whitelist: *
Click to submit. An access application (AK) will be generated.
Write down the AK code, you will use it to draw the Baidu map on subsequent pages.
纬度:经度: 地址 : 点击显示地图获取地址经纬度
<script type="text/javascript">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.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); } </script>
The above is the detailed content of Introduction to the method of automatically filling the longitude and latitude into the text box using js. For more information, please follow other related articles on the PHP Chinese website!