Javascript 如何使用带有搜索按钮的GooglePlacesAPI？

我正在我的项目中使用GooglePlacesAPI。当我在文本框中输入一些内容并在键盘上点击“回车”时，它工作正常。它正在显示结果

但是，我想把搜索按钮放在文本框旁边，当我按下搜索按钮时，结果应该会显示出来

这是我的初始化函数

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);
    }
  }
}

---

我最近实现了类似的功能。我需要使用两种不同的功能；一个用于调用

places\u 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);
}

---

以下示例演示了如何：

• 在搜索框旁边放置一个搜索按钮

• 单击按钮后显示结果（而不是从中选择项目后显示的标准行为）

函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:-33.8688，lng:151.2195}，
缩放：13，
mapTypeId:“路线图”
});
//创建搜索框并将其链接到UI元素。
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（搜索输入）；
map.controls[google.maps.ControlPosition.TOP\u LEFT].push（searchBtn）；
//将搜索框结果偏向当前地图的视口。
map.addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
var标记=[]；
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
searchBox.addListener（'places\u changed'，函数（）{
//显示搜索结果（地图、搜索框、标记）；
});
searchBtn.onclick=函数（）{
显示搜索结果（地图、搜索框、标记）；
}
}
函数显示搜索结果（地图、搜索框、标记）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
//清除旧的标记。
markers.forEach（函数（marker）{
marker.setMap（空）；
});
标记=[]；
//对于每个位置，获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
如果（！place.geometry）{
log（“返回的位置不包含几何图形”）；
返回；
}
变量图标={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
markers.push（新的google.maps.Marker）({
地图：地图，
图标：图标，
标题：place.name，
位置：place.geometry.location
}));
if（place.geometry.viewport）{
//只有地理代码具有视口。
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
}
initAutocomplete（）
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
.控制{
边缘顶部：10px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
}
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：300px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
.pac集装箱{
字体系列：Roboto；
}
#类型选择器{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
#目标{
宽度：345px；
}
按钮[id=“搜索按钮”]{
左边距：-50px；
边缘顶部：10px；
高度：32px；
宽度：50px；
背景：蓝色；
颜色：白色；
边界：0；
-webkit外观：无；
}
我不认为这些答案仍然有效，但本文档对我帮助很大


当按钮通过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);
      }
    });
  }

为什么这个标签是“google-maps-api-2”？已弃用并已关闭。@geocodezip对此表示抱歉。我删除了标签。如果您知道答案，请帮助我。geocoder.geocode（位置，函数（数据）{```中的数据是什么？？