谷歌地图得到地点编号

问题描述：

我想要上的经度和纬度的place_id写在#send点击。 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匹配。想快速帮助。任何帮助将不胜感激。

您为什么认为该位置id错了？放置ID可以唯一标识一个地方，但多个地点ID可能指向相同的地方。 – geocodezip

答

这只是一个猜测，但我认为在地理编码函数中作为响应对象返回的数组对于每个搜索都有多个结果。您似乎在呼叫响应对象的第二个最接近的匹配，索引为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);

谷歌地图得到地点编号

相关推荐