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.

1. Log in to Baidu Map Open Platform

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.

2. Create an html web page. Part of the code is as follows:

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

3, JS code

<script>document.getElementById(&#39;open&#39;).onclick = function () {  if (document.getElementById(&#39;allmap&#39;).style.display == &#39;none&#39;) {  
            document.getElementById(&#39;allmap&#39;).style.display = &#39;block&#39;;  
        } else {  
            document.getElementById(&#39;allmap&#39;).style.display = &#39;none&#39;;  
        }  
    }  
   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(&#39;failed&#39; + 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(&#39;lng&#39;).value = e.point.lng;  
        document.getElementById(&#39;lat&#39;).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(&#39;allmap&#39;).style.display = &#39;none&#39;;  
                document.getElementById(&#39;address&#39;).value = address;  
            }  
        });  
        addMarker(e.point);  
    }  
</script>

Rendering:

PS: One thing to note is that the js code must be written after the body. Otherwise, the ground cannot be displayed

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!