没有按钮的谷歌地理编码答案

【问题标题】：Google geocoding without a button没有按钮的谷歌地理编码
【发布时间】：2015-10-02 02:43:48
【问题描述】：

我正在尝试在没有按钮的情况下实现用于地理编码的输入元素。即用户开始输入地址，然后从 Google 建议的列表中选择想要的地址

在我的 Javsacript 代码中，我加载以下内容以启用我的输入元素的地理编码：

var geocoder = new google.maps.Geocoder;
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);

这提供了一组来自潜在地址输入字段的下拉菜单。当通过向下箭头选择地址然后按下 Enter 时，我使用以下内容捕获 Enter 键并执行地理编码（而不是使用按钮）。

// capture enter on address input selection
  $("#pac-input").keyup(function(e) {
    if (e.keyCode == 13) {
      geocode();
    }
  });

但是，我还想捕捉鼠标在潜在下拉字段之一上的点击。我正在使用以下内容来捕获所有鼠标点击

// capture event for mouse click or ipad input
  $(document).on('click', function(e) {
    console.log($(this));
    var target = $(e.target);
    console.log(target[0]);
  });

当我看到鼠标点击时的控制台活动时，这个功能绝对有效，例如：

[document, context: document]
<input id="pac-input" class="form-control" type="text" placeholder="Enter a location" autocomplete="off">

但是，在单击 Google JS 提供的下拉字段之一时，我看到没有控制台日志。这里发生了什么？

编辑：我现在确实看到了控制台输出。但是使用

$(document).on('click', function(e) {
    console.log($(this));
    var target = e.target;
    console.log(target);
});

我看到<body role="document">..</body>。没有太多的标识符..

【问题讨论】：

你是对的，但是对于目标，当我点击 Google 建议的地址下拉菜单时，我只会得到 ..。这是与 Chrome 重新启动有关 - 当我没有看到任何控制台日志时，一定是出了问题。
target 应该是 var target = e.target; 然后 target 是你的元素。为什么要target[0]？这就是为什么它无论如何都不会出现在控制台中的原因。如果您想要动态地理编码，您将不得不使用某种事件。 navigator.geolocation.watchPostion() 可能就是你想要的。

标签： javascript jquery google-maps geocoding

【解决方案1】：

您的 target 是 <body role="document">..</body> 因为这是您将事件处理程序附加到的内容 - $(document) 非常适合捕获所有鼠标点击，但这意味着事件必须一直冒泡才能获得处理。

为什么不使用 Google 的 autocomplete 的内置事件处理程序？来自这个example：

google.maps.event.addListener(autoComplete, 'place_changed', function() {
  var place = autocomplete.getPlace();
  if (place.geometry) {
     map.panTo(place.geometry.location);
     map.setZoom(15);
  } 
});

【讨论】：

太棒了！谢谢你 - 一旦发生自动完成，我在我的代码中进行了一些修改，但这适用于 Chrome 上的鼠标和输入键选择，也适用于 iOS 上的触摸事件！