如何通過搜索按鈕使用Google Places API？

Question

我在我的項目中使用Google Places API。當我在文本框中輸入一些內容並在鍵盤上點擊「Enter」時，它工作正常。它顯示了結果。

但是，我想將搜索按鈕放在文本框旁邊，當我按下搜索按鈕時，結果應該顯示。

這是我的初始化函數。

function initialize() { 
    ... 
    google.maps.event.addListener(searchBox, 'places_changed', function() { 

    // When I hit Enter button the execution directly comes here. 
    // I don't know how to work with onClick function for this purpose. 

    var places = searchBox.getPlaces(); 
    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 
    } 
} 

Answer 1

我最近實現了類似的東西。我需要使用兩種不同的功能;一個用於調用places_changed（其中已經有地理位置數據），另一個用於觸發按鈕事件時需要手動管理對Google的地理位置調用。你的代碼可能是這個樣子：

var searchBox, map, geocoder; 

function processPlacesSearch() { 
    var places = searchBox.getPlaces(); 
    if (places.length) { 
    location = places[0].geometry.location; 
    var origin = new google.maps.LatLng(location.lat(), location.lng()); 
    // plot origin 
    } 
} 

function processButtonSearch(location) { 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode(location, function (data) { 
    var lat = data[0].geometry.location.lat(); 
    var lng = data[0].geometry.location.lng(); 
    var origin = new google.maps.LatLng(lat, lng); 
    // plot origin 
    }); 
} 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), options); 
    searchBox = new google.maps.places.SearchBox(document.getElementById('searchbox')); 
    google.maps.event.addListener(searchBox, 'places_changed', processPlacesSearch); 
} 

var button = document.getElementById('searchbutton'); 
var searchbox = document.getElementById('searchbox'); 

button.onclick = function() { 
    var location = searchbox.value; 
    processButtonSearch(location); 
} 

Answer 2

下面的例子演示瞭如何：

• 的地方旁邊的搜索框

• 顯示結果的搜索按鈕，一旦按鈕點擊（代替從Place Autocomplete選擇項目時顯示的標準行爲）

function initAutocomplete() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { lat: -33.8688, lng: 151.2195 }, 
 
     zoom: 13, 
 
     mapTypeId: 'roadmap' 
 
    }); 
 

 
    // Create the search box and link it to the UI element. 
 
    var searchInput = document.getElementById('pac-input'); 
 
    var searchBtn = document.getElementById('search-button'); 
 
    var searchBox = new google.maps.places.SearchBox(searchInput); 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchInput); 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchBtn); 
 

 
    // Bias the SearchBox results towards current map's viewport. 
 
    map.addListener('bounds_changed', function() { 
 
     searchBox.setBounds(map.getBounds()); 
 
    }); 
 

 
    var markers = []; 
 
    // Listen for the event fired when the user selects a prediction and retrieve 
 
    // more details for that place. 
 
    searchBox.addListener('places_changed', function() { 
 
     //displaySearchResults(map, searchBox, markers); 
 
    }); 
 

 
    
 
    searchBtn.onclick = function() { 
 
     displaySearchResults(map,searchBox,markers); 
 
    } 
 
} 
 

 

 

 
function displaySearchResults(map, searchBox, markers) { 
 
    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) { 
 
     if (!place.geometry) { 
 
      console.log("Returned place contains no geometry"); 
 
      return; 
 
     } 
 
     var icon = { 
 
      url: place.icon, 
 
      size: new google.maps.Size(71, 71), 
 
      origin: new google.maps.Point(0, 0), 
 
      anchor: new google.maps.Point(17, 34), 
 
      scaledSize: new google.maps.Size(25, 25) 
 
     }; 
 

 
     // Create a marker for each place. 
 
     markers.push(new google.maps.Marker({ 
 
      map: map, 
 
      icon: icon, 
 
      title: place.name, 
 
      position: place.geometry.location 
 
     })); 
 

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

 
initAutocomplete();

html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     .controls { 
 
     margin-top: 10px; 
 
     border: 1px solid transparent; 
 
     border-radius: 2px 0 0 2px; 
 
     box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     height: 32px; 
 
     outline: none; 
 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
     } 
 

 
     #pac-input { 
 
     background-color: #fff; 
 
     font-family: Roboto; 
 
     font-size: 15px; 
 
     font-weight: 300; 
 
     margin-left: 12px; 
 
     padding: 0 11px 0 13px; 
 
     text-overflow: ellipsis; 
 
     width: 300px; 
 
     } 
 

 
     #pac-input:focus { 
 
     border-color: #4d90fe; 
 
     } 
 

 
     .pac-container { 
 
     font-family: Roboto; 
 
     } 
 

 
     #type-selector { 
 
     color: #fff; 
 
     background-color: #4d90fe; 
 
     padding: 5px 11px 0px 11px; 
 
     } 
 

 
     #type-selector label { 
 
     font-family: Roboto; 
 
     font-size: 13px; 
 
     font-weight: 300; 
 
     } 
 
     #target { 
 
     width: 345px; 
 
     } 
 

 

 
button[id="search-button"] { 
 
    margin-left: -50px; 
 
    margin-top: 10px; 
 
    height: 32px; 
 
    width: 50px; 
 
    background: blue; 
 
    color: white; 
 
    border: 0; 
 
    -webkit-appearance: none; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" /> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
<button id="search-button" class="icon"><i class="fa fa-search"></i></button> 
 
<div id="map"></div> 
 

Answer 3

我不認爲這些答案仍然在日期，但該文檔大量幫助我。

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

作爲按鈕穿過gecoder和地圖，然後處理所述搜索框的值。

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 8, 
     center: {lat: -34.397, lng: 150.644} 
    }); 
    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    }); 
    } 

    function geocodeAddress(geocoder, resultsMap) { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status === 'OK') { 
     resultsMap.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: resultsMap, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    }