Question

我希望#latlng点击#send上的经度和纬度的place_id。 html就在这里

      <input id="latlng" class="controls" type="text"><input id="place_input" class="controls" type="text"><input type="button" id="send" value="send">
      <div id="map_div">
        <input id="pac-input" class="controls" type="text" placeholder="Search Box">
        <div id="map"></div>
      </div>

javascript就在这里

function initAutocomplete() {

  var lat = {lat: 20.593684, lng:  78.96288000000004};
  var markers = [];

  var map = new google.maps.Map(document.getElementById('map'), {
    center: lat,
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
     zoomControl: true,
    scaleControl: true
  });

  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  var input = document.getElementById('pac-input');

    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

    searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();

    places.forEach(function(place) {

    var marker = new google.maps.Marker({
        map: map,
        title: place.name,
        position: place.geometry.location,
        draggable:true
      });
      // Create a marker for each place.
      markers.push(marker);
      document.getElementById("place_input").value = place.geometry.location;

      google.maps.event.addListener(marker, 'click', function (marker) {
                document.getElementById("latlng").value = this.getPosition().lat() + ', ' + this.getPosition().lng() ; 
        }); 

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });

    map.fitBounds(bounds);
  });


   google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });


  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
   }

  function addMarker(location, map) {   
      if(markers.length == 0){
             var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    draggable:true
              });

            markers.push(marker);
            google.maps.event.addListener(marker, 'click', function (marker) {
                document.getElementById("latlng").value =  this.getPosition().lat() + ', ' + this.getPosition().lng() ; 
            });           
       }else{
            var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    draggable:true
              });
            setMapOnAll(null);
            markers = [];
            markers.push(marker);
            google.maps.event.addListener(marker, 'click', function (marker) {
                document.getElementById("latlng").value = this.getPosition().lat() + ', ' + this.getPosition().lng() ; 
            });     
       }
  }



  var placename ;

  function geocodeLatLng(geocoder, map, infowindow) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
    geocoder.geocode({'location': latlng}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
        if (results[1]) {
            map.setZoom(11);
            var marker = new google.maps.Marker({
            position: latlng,
            map: map
            });
            infowindow.setContent(results[1].formatted_address);
            infowindow.open(map, marker);
           placename = results[1].formatted_address;
           document.getElementById("place_input").value =  placename;
        } else {
            window.alert('No results found');
        }
        } else {
        window.alert('Geocoder failed due to: ' + status);
        }
    });
    }

    function codeAddress(geocoder,map,infowindow) {
        var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
        var latitude = parseFloat(latlngStr[0]);               
        var longitude = parseFloat(latlngStr[1]);
        var latlng = {lat: latitude, lng: longitude};

        geocoder.geocode({'location': latlng}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                console.log(results[1].geometry.location);
                var marker = new google.maps.Marker({
                map: map,
                position: results[1].geometry.location
                });
                console.log(results[1].place_id);
            } else {
                window.alert('No results found');
            }
            } else {
            window.alert('Geocoder failed due to: ' + status);
            }
        });
    }



    document.getElementById('send').addEventListener('click', function() {
        /*geocodeLatLng(geocoder, map, infowindow);*/
        codeAddress(geocoder,map,infowindow);
    });


}

此代码无效。它给出了错误的地方ID。我把它与google map place id finder相匹配。想快速帮助。任何帮助将不胜感激。

Answer 1

这只是猜测，但我认为在地理编码功能中作为响应对象返回的数组每次搜索都有多个结果。您似乎在调用响应对象的第二个最接近的匹配，索引为1.尝试：

        if (results[0]) {
            console.log(results[0].geometry.location);
            var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
            });
            console.log(results[0].place_id);

谷歌地图获取地方ID

1 个答案: