Front-end learning-use the JS library leaflet.js to generate a world map and obtain the latitude and longitude of the callout address.

Description: Leaflet is an open source JavaScript library that is friendly to the mobile side and has good interactivity with the map. The size is only a few kilobytes and has the features required by most maps.

The leaflet is designed to be very simple and easy to understand, with good performance and ease of use. It works very efficiently on both the desktop and the mobile side, and has a large number of plugins to expand the functionality of leaflet.
Public number: 673399718 hehe
The demo chart is as follows:

Using Leaflet.js to generate a world map is very convenient, configuration parameters are recorded, and it is interesting to look at the introduction of the jquery operation Dom in this example.
First: Introduce the CSS file CDN address on the head of the page:
<link rel= "stylesheet" href= "Http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css"/>
Introduce the JS file CDN address before body:
<script src= "Http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js" ></script>
Place the DIV tag with id mapid on the map display:

<div id= "MapID" ></div>
Make sure that the map container has a defined height, such as adding the following code to the CSS file:
#mapid{height:180px;}
Create a central point in London, using the map of Mapbox street tiles. First initialize the map and set the map's center point and zoom level in the window:

var mymap = l.map (' MapID '). Setview ([51.505,-0.09], 13);
Next, add a tile layer (the rendered map image fragment) on the map, and in this case I use the Mapbox Street tile layer. Creating a tile layer usually involves setting the URL template to use the tile map (get your tile map in Mapbox), and the properties set include the attribute text and the maximum scale of the layer.
var mymap = l.map (' MapID ');
Mymap.locate ({setview:true, maxzoom:16});
var position = [];
L.tilelayer (' https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token= Pk.eyj1ijoibwfwym94iiwiysi6imnpandmbxlindbjzwd2m2x6bdk3c2ztotkifq._qa7i5mpkd_m30igelhziw ', {
Maxzoom:18,
ID: ' Mapbox.streets '
}). AddTo (Mymap);
Leaflet has a very ingenious way to handle the zoom level of the map and probe the user's location-the locate method with the Setview option. Use the common Setview method in this line of code:

Locate ({setview:true, maxzoom:16})
Here I set the maximum zoom level to 16 and set the map to automatically adjust the window according to the location. When the user agrees to share the user's location with the browser, the map automatically adjusts the window center to that location.

The Leaflet.js has two interfaces Locationerror is the callback function that is called after the local address failure is obtained, and Locationfound is the callback that gets the successful local address.
Make sure that all the code is before creating div tags and referencing leaflet.js. There should be no problem, you now have a leaflet map to use.

Parameter description:
Marker can drag to set {draggable:true} parameter
Get Mark's latitude and longitude information: marker.getlatlng ();
In the code, I used an array to hold the address latitude and longitude returned by the drag icon, only the last definite position is required, i.e. the last element of the array: Position[position.length-1].lat
Use of pop-up boxes: to bind the map to a point-click event, when an event occurs, the Bindpopup method binds the HTML content to the popup box. When you click on this object, Bindpopup will open a popup box immediately.
function Onmapclick (e) {
var popup = L.popup ();
Popup
. SETLATLNG (E.LATLNG)
. SetContent ("where you clicked in" + e.latlng.tostring ())
. Openon (Mymap);
}

Code:

<! DOCTYPE html>


<meta charset= "UTF-8" >
<title>Title</title>
<link href= "//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel= "stylesheet" >
<link rel= "stylesheet" href= "Http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css"/>
<style>
#mapid {
Float:left;
height:500px;
width:800px;
margin-left:60px;
        }
#right {
height:500px;
width:500px;
Float:right;
Background:rgb (184, A.);
        }
</style>

<body>
<div class= "Panel Panel-default" >
<div class= "panel-heading" >

</div>
<div class= "Panel-body" >
<div class= "container" >
<div class= "Form-group" >
<label class= "Col-sm-1 Control-label" > warehouse name </label>
<div class= "col-sm-11" >
<input type= "text" class= "Form-control" Id=name "placeholder=" Enter your warehouse name >
</div>
</div>
<div class= "Form-group" >
<label class= "Col-sm-1 Control-label" > Warehouse address </label>
<div class= "col-sm-11" >
<input type= "text" class= "Form-control" id= "addr" >
</div>
</div>
<div class= "Form-group" >
<label class= "Col-sm-1 Control-label" > Address longitude </label>
<div class= "col-sm-11" >
<input type= "text" class= "Form-control" id= "lat" >
</div>
</div>
<div class= "Form-group" >
<label class= "Col-sm-1 control-label" > Address latitude </label>
<div class= "col-sm-11" >
<input type= "text" class= "Form-control" id= "lon" >
</div>
</div>
<div class= "col-md-6" style= "margin-top:20px" >
<button id= "referred" class= "btn btn-success" > OK </button>
<a id= "Back" class= "btn btn-success" > Return </a>
<span> Select the location of your warehouse in the map to store warehouse information. </span>
</div>

</div>
<div id= "MapID" ></div>
<div id= "right" ></div>
</div>
</div>
<script src= "Http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js" ></script>
<script src= "//cdn.bootcss.com/jquery/2.2.4/jquery.min.js" ></script>
<script>

var mymap = l.map (' mapid ');
mymap.locate ({setview:true, maxzoom:16});
var position = [];
L.tilelayer (' https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token= Pk.eyj1ijoibwfwym94iiwiysi6imnpandmbxlindbjzwd2m2x6bdk3c2ztotkifq._qa7i5mpkd_m30igelhziw ', {
maxzoom:18,
ID: ' Mapbox.streets '
}). AddTo (Mymap);

function Onlocationfound (e) {
L.marker (E.latlng,{draggable:true})
. AddTo (Mymap)
. Bindpopup ("Please select Warehouse location!"). Openpopup ()
. On (' Dragend ', function (event) {
var marker = event.target;
var latlng = marker.getlatlng ();
Position.push (LATLNG);
                });

    }

function Onlocationerror () {
L.marker ([51.5, -0.09],{draggable:true})
. AddTo (Mymap)
. Bindpopup ("<b> Please select Warehouse location!</b>"). Openpopup ()
. On (' Dragend ', function (event) {
var marker = event.target;
var latlng = marker.getlatlng ();
Position.push (LATLNG);
                });
    }

mymap.on (' Locationerror ', onlocationerror);
mymap.on (' Locationfound ', onlocationfound);

function Onmapclick (e) {
var popup = L.popup ();
Popup
. SETLATLNG (E.LATLNG)
. SetContent ("where you clicked in" + e.latlng.tostring ())
. Openon (mymap);
    }

mymap.on (' click ', Onmapclick);


$ (' #referred '). Click (function () {
var name = $ (' #name '). Val ();
var address = $ (' #addr '). Val ();
if (name== ' | | | address== ' | | position[position.length-1]==undefined) {
$ (' #referred '). Prop (' disabled ', false);
$.toast ({
position: ' Top-right ',
text: ' Please complete the warehouse information! ',
icon: ' Error '
            })
        }
else {
var lat = Position[position.length-1].lat;
var lng = POSITION[POSITION.LENGTH-1].LNG;
$ (' #lat '). val (lat);
$ (' #lon '). Val (LNG);
$ (' #right '). Text (position)
        }

    });
//Return to warehouse
$ (' #back '). Click (function () {
$ (this). attr (' href ', ' warehouse.html ');
    })
</script>
</body>

Front-end learning-use the JS library leaflet.js to generate a world map and obtain the latitude and longitude of the callout address.