Google 没有按钮的地理编码

Question

我正在尝试实现一个没有按钮的地理编码输入元素。即用户开始输入地址，然后从 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]);
  });

这个功能肯定有效，因为我看到控制台 activity 鼠标点击，例如：

[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>。标识符不多..

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

Google 没有按钮的地理编码

Google geocoding without a button

javascript

jquery

google-maps

geocoding