javascript - Google Maps Api-3 里面输入地址

Question

我想当用户在 map 上拖动图钉时自动将地址插入到输入中。

<script>
    var lat = 41.013995; //default latitude
    var lng = 28.979741; //default longitude
    var homeLatlng = new google.maps.LatLng(lat, lng); //set default coordinates
    var homeMarker = new google.maps.Marker({ //set marker
      position: homeLatlng, //set marker position equal to the default coordinates
      map: map, //set map to be used by the marker
      draggable: true //make the marker draggable
    });

    var myOptions = {
      center: new google.maps.LatLng(41.013995, 28.979741), //set map center
      zoom: 17, //set zoom level to 17
      mapTypeId: google.maps.MapTypeId.ROADMAP //set map type to road map
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions); //initialize the map

    var marker = new google.maps.Marker({
        draggable: true,
        position: homeLatlng,
        map: map,
        title: "Your location"
    });

    google.maps.event.addListener(marker, 'dragend', function (event) {
        document.getElementById("lat").value = event.latLng.lat();
        document.getElementById("long").value = event.latLng.lng();
    });

    //if the position of the marker changes set latitude and longitude to
    //current position of the marker
    google.maps.event.addListener(homeMarker, 'position_changed', function(){
      var lat = homeMarker.getPosition().lat(); //set lat current latitude where the marker is plotted
      var lng = homeMarker.getPosition().lng(); //set lat current longitude where the marker is plotted

    });

    //if the center of the map has changed
    google.maps.event.addListener(map, 'center_changed', function(){
      var lat = homeMarker.getPosition().lat(); //set lat to current latitude where the marker is plotted
      var lng = homeMarker.getPosition().lng(); //set lng current latitude where the marker is plotted
      draggable: true;
    });


    var input = document.getElementById('search_new_places'); //get element to use as input for autocomplete
    var autocomplete = new google.maps.places.Autocomplete(input); //set it as the input for autocomplete

    autocomplete.bindTo('bounds', map); //bias the results to the maps viewport

    //executed when a place is selected from the search field
    google.maps.event.addListener(autocomplete, 'place_changed', function(){

        //get information about the selected place in the autocomplete text field
        var place = autocomplete.getPlace();

        if (place.geometry.viewport){ //for places within the default view port (continents, countries)
          map.fitBounds(place.geometry.viewport); //set map center to the coordinates of the location
        } else { //for places that are not on the default view port (cities, streets)
          map.setCenter(place.geometry.location);  //set map center to the coordinates of the location
          map.setZoom(17); //set a custom zoom level of 17
        }

        homeMarker.setMap(map); //set the map to be used by the  marker
        homeMarker.setPosition(place.geometry.location); //plot marker into the coordinates of the location

    });

  $('#plot_marker').click(function(e){ //used for plotting the marker into the map if it doesn't exist already
      e.preventDefault();
      homeMarker.setMap(map); //set the map to be used by marker
      homeMarker.setPosition(map.getCenter()); //set position of marker equal to the current center of the map
      map.setZoom(17);

      $('input[type=text], input[type=hidden]').val('');
  });

  $('#search_ex_places').blur(function(){//once the user has selected an existing place

      var place = $(this).val();
      //initialize values
      var exists = 0;
      var lat = 0; 
      var lng = 0;
      $('#saved_places option').each(function(index){ //loop through the save places
        var cur_place = $(this).data('place'); //current place description

        //if current place in the loop is equal to the selected place
        //then set the information to their respected fields
        if(cur_place == place){ 
          exists = 1;
          $('#place_id').val($(this).data('id'));
          lat = $(this).data('lat');
          lng = $(this).data('lng');
          $('#n_place').val($(this).data('place'));
          $('#n_description').val($(this).data('description'));
          $('#search_new_places').val($(this).data('kayitliyer'));
          $('#n_yetkiliad').val($(this).data('yetkiliad'));
          $('#n_magazaad').val($(this).data('magazaad'));
          $('#n_telefon').val($(this).data('telefon'));
          $('#y_telefon').val($(this).data('yetkilitelefon'));
          $('#derece').val($(this).data('derece'));

        }
      });

      if(exists == 0){//if the place doesn't exist then empty all the text fields and hidden fields
        $('input[type=text], input[type=hidden]').val('');

      }else{
        //set the coordinates of the selected place
        var position = new google.maps.LatLng(lat, lng);

        //set marker position
        homeMarker.setMap(map);
        homeMarker.setPosition(position);

        //set the center of the map
        map.setCenter(homeMarker.getPosition());
        map.setZoom(17);

      }
    });

    $('#btn_save').click(function(){
      var place   = $.trim($('#n_place').val());
      var description = $.trim($('#n_description').val());
      var kayitliyer = $.trim($('#search_new_places').val());
      var yetkiliad = $.trim($('#n_yetkiliad').val());
      var magazaad = $.trim($('#n_magazaad').val());
      var telefon = $.trim($('#n_telefon').val());
      var yetkilitelefon = $.trim($('#y_telefon').val());
      var derece = $.trim($('#derece').val());
      var lat = homeMarker.getPosition().lat();
      var lng = homeMarker.getPosition().lng();


      $.post('save_place.php', {'place' : place, 'description' : description, 'lat' : lat, 'lng' : lng, 'kayitliyer' : kayitliyer, 'yetkiliad' : yetkiliad, 'magazaad' : magazaad, 'telefon' : telefon,'yetkilitelefon' : yetkilitelefon, 'derece' : derece},
        function(data){
          var place_id = data;
          var new_option = $('<option>').attr({'data-id' : place_id, 'data-place' : place, 'data-lat' : lat, 'data-lng' : lng, 'data-description' : description, 'data-kayitliyer' : kayitliyer, 'data-yetkiliad' : yetkiliad, 'data-magazaad' : magazaad, 'data-telefon' : telefon,'data-yetkilitelefon': yetkilitelefon,'data-derece' : derece}).text(place);
          new_option.appendTo($('#saved_places'));
        }
      );

      $('input[type=text], input[type=hidden]').val('');
    });
</script>

fiddle

Answer 1

使用Reverse Geocoding将 latlng 对象转换为格式化地址的服务。

var geocoder = new google.maps.Geocoder;

/* .... */

google.maps.event.addListener(marker, 'dragend', function (event) {


    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("long").value = event.latLng.lng();

    // Reverse geo code using latLng
    geocoder.geocode({'location': event.latLng }, function(results, status) {

      if (status === 'OK') {
        if (results[0]) {
          $('#search_new_places').val( results[0].formatted_address );
        } else {
          window.alert('No results found');
        }

      } else {
        window.alert('Geocoder failed due to: ' + status);
      }

    });

});

查看更新fiddle