没有按钮的谷歌地理编码

Google geocoding without a button

本文关键字：编码 谷歌 按钮      更新时间：2023-09-26

我试图实现一个没有按钮的地理编码输入元素。也就是说，用户开始输入一个地址，然后从谷歌推荐的地址列表中选择想要的地址

在我的javascript代码中，我加载了以下代码以启用输入元素的地理编码:

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>。没有太多的标识符…

您的target是<body role="document">..</body>，因为这是您附加的事件处理程序- $(document)是非常好的捕获所有鼠标点击，但这意味着事件必须冒泡所有的方式之前得到处理。

为什么不使用内置的事件处理程序为谷歌的autocomplete ?从这个例子中:

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