My own project has the need to get the coordinate latitude and longitude of the current click or to get the information of the current street.
Estimate this for novice, or more trouble, because it is not very easy to find this from the official website, to find for a long time, good luck may be found at once.
Write your own test case. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatlng = {
lat: 39.921323,
lng: 116.426239
};
var marker ;
var markersArray = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
});
map.addListener('click', function(e) {
addMarker(e.latLng, map);
//Obtaining Current Geographic Information Based on Longitude and Latitude
var latLngData = e.latLng.lat().toFixed(6)+','+e.latLng.lng().toFixed(6);
console.log(latLngData)
$.ajax({
type:"post",
url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE",
async:true,
success:function(data){
console.log(data)
var site = latLngData+'<br />'+data.results[0].formatted_address;
console.log(site)
var infowindow = new google.maps.InfoWindow({
content: site
});
infowindow.open(map,marker); //Pop-up message prompt window
}
});
});
//Add coordinate objects
function addMarker(latLng, map) {
if(markersArray.length>0){
markersArray[0].setMap(null);
};
markersArray.shift(marker)
marker = new google.maps.Marker({
position: latLng,
map: map
});
markersArray.push(marker);
}
}
</script>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap" async defer></script>
</body>
</html>
Note: Please introduce your own local jquery because of the ajax request, Google's geographic service interface.
The core of the code is the URL of the request:
url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE"
This is a longitude-latitude reverse geocoding. There are four parameters in this url: latlng, location_type, result_type, key, and detailed concepts and parameters. Please refer to the next chapter. Geocoding API for Google Maps API Development
Reprinted at: https://www.cnblogs.com/qiudongxu/p/8328291.html