1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <title>Simple Map</title>
    6.     <meta name="viewport" content="initial-scale=1.0">
    7.     <meta charset="utf-8">
    8.     <style>
    9.         html,
    10.         body {
    11.             height: 100%;
    12.             margin: 0;
    13.             padding: 0;
    14.         }
    16.         #map {
    17.             height: 100%;
    18.         }
    19.     </style>
    20. </head>
    22. <body>
    23.     <div id="map"></div>
    24.     <script>
    25.         function initMap() {
    26.             var myLatlng = {
    27.                 lat: 39.921323,
    28.                 lng: 116.426239
    29.             };
    30.             var marker ;
    31.             var markersArray = [];
    32.             var map = new google.maps.Map(document.getElementById('map'), {
    33.                 zoom: 12,
    34.                 center: myLatlng
    35.             });
    36.             map.addListener('click', function(e) {
    37.                 addMarker(e.latLng, map);
    38.                 //根据经纬度获取 当前地理信息
    39.                 var latLngData = e.latLng.lat().toFixed(6)+','+e.latLng.lng().toFixed(6);
    40.                 console.log(latLngData)
    41.                 $.ajax({
    42.                     type:"post",
    43.                     url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyB6oFVGAOKiES5J2ZyDuuXAfOdqIcpFpNA",
    44.                     async:true,
    45.                     success:function(data){
    46.                         console.log(data)
    47.                         var site = latLngData+'<br />'+data.results[0].formatted_address;
    48.                         console.log(site)
    49.                         var infowindow = new google.maps.InfoWindow({
    50.                             content: site
    51.                         });
    52.                         infowindow.open(map,marker); //弹出信息提示窗口
    53.                     }
    54.                 });
    56.             });
    57.             //添加坐标对象
    58.             function addMarker(latLng, map) {
    59.                 if(markersArray.length>0){
    60.                         markersArray[0].setMap(null);
    61.                 };
    62.                 markersArray.shift(marker)
    63.                 marker = new google.maps.Marker({
    64.                     position: latLng,
    65.                     map: map
    66.                 });
    67.                 markersArray.push(marker);
    68.             }
    69.         }
    70.     </script>
    71.     <script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    72.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6oFVGAOKiES5J2ZyDuuXAfOdqIcpFpNA&callback=initMap" async defer></script>
    73. </body>
    75. </html>