js를 이용하여 텍스트박스에 경도와 위도를 자동으로 채우는 방법 소개

먼저 Baidu Map API를 등록해야 합니다.

1. Baidu Map Open Platform에 로그인하세요

계정을 등록하고 정보를 입력한 후 웹사이트 오른쪽 상단의 "API Console"을 클릭하고 클릭하여 애플리케이션을 만듭니다.

신청 유형 선택: "브라우저", 모든 신청 서비스 선택, 추천인 허용 목록: *

제출하려면 클릭하세요. 액세스 애플리케이션(AK)이 생성됩니다.

AK 코드를 적어두면 다음 페이지에서 이를 사용하여 Baidu 지도를 그릴 수 있습니다.

2.html 웹페이지를 생성합니다. 코드 부분은 다음과 같습니다:

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

3. JS 코드

<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>

Rendering:

PS: 한 가지 주의할 점은 js 코드가 몸. 그렇지 않으면 토지를 표시할 수 없습니다

위 내용은 js를 이용하여 텍스트박스에 경도와 위도를 자동으로 채우는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!