Table of Contents
1. Log in to Baidu Map Open Platform
2. Create an html web page. Part of the code is as follows:
3, JS code
Rendering:
PS: One thing to note is that the js code must be written after the body. Otherwise, the ground cannot be displayed" >PS: One thing to note is that the js code must be written after the body. Otherwise, the ground cannot be displayed
Home Web Front-end JS Tutorial Introduction to the method of automatically filling the longitude and latitude into the text box using js

Introduction to the method of automatically filling the longitude and latitude into the text box using js

Jul 02, 2017 am 09:34 AM
javascript map address

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:

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

3, JS code

<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>
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to make Google Maps the default map in iPhone How to make Google Maps the default map in iPhone Apr 17, 2024 pm 07:34 PM

The default map on the iPhone is Maps, Apple's proprietary geolocation provider. Although the map is getting better, it doesn't work well outside the United States. It has nothing to offer compared to Google Maps. In this article, we discuss the feasible steps to use Google Maps to become the default map on your iPhone. How to Make Google Maps the Default Map in iPhone Setting Google Maps as the default map app on your phone is easier than you think. Follow the steps below – Prerequisite steps – You must have Gmail installed on your phone. Step 1 – Open the AppStore. Step 2 – Search for “Gmail”. Step 3 – Click next to Gmail app

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

Apple after-sales (apple after-sales point address) Apple after-sales (apple after-sales point address) Jan 11, 2024 pm 10:30 PM

Apple’s official after-sales phone number: Apple’s 24-hour service center phone number: 400-666-8800. The after-sales service telephone number for Apple mobile phones is: 400-666-8800. -627-2273. Apple’s customer service manual service hotline is 400-627-2273 for after-sales support; 400-666-8800 for the online store; and the only official Apple phone number is 400-666-8800. Apple's customer service hotline is 400-666-8800. You can call this number to inquire about hardware, software and third-party accessories of Apple products. It should be noted that Apple’s manual customer service does not provide services 24 hours a day. Their service hours are from 9 a.m. to 9 p.m. (Sundays are from 9 a.m. to 9 p.m.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Where can I change my Meituan address? Meituan address modification tutorial! Where can I change my Meituan address? Meituan address modification tutorial! Mar 15, 2024 pm 04:07 PM

1. Where can I change my Meituan address? Meituan address modification tutorial! Method (1) 1. Enter Meituan My Page and click Settings. 2. Select personal information. 3. Click the shipping address again. 4. Finally, select the address you want to modify, click the pen icon on the right side of the address, and modify it. Method (2) 1. On the homepage of the Meituan app, click Takeout, then click More Functions after entering. 2. In the More interface, click Manage Address. 3. In the My Shipping Address interface, select Edit. 4. Modify them one by one according to your needs, and finally click to save the address.

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to add store address to Xiaohongshu map? How to fill in the store address setting? How to add store address to Xiaohongshu map? How to fill in the store address setting? Mar 29, 2024 am 09:41 AM

As Xiaohongshu becomes more and more popular among young people, more and more people choose to open stores on Xiaohongshu. Many novice sellers encounter difficulties when setting up their store address and do not know how to add the store address to the map. 1. How to add the store address to the map in Xiaohongshu? 1. First, make sure your store has a registered account on Xiaohongshu and has successfully opened a store. 2. Log in to your Xiaohongshu account, enter the store backend, and find the "Store Settings" option. 3. On the store settings page, find the "Store Address" column and click "Add Address". 4. In the address adding page that pops up, fill in the detailed address information of the store, including province, city, district, county, street, house number, etc. 5. After filling in, click the "Confirm Add" button. Xiaohongshu will provide you with the address

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

See all articles