按 ENTER 在 Google Map v3 上搜索地址答案

【问题标题】：Search address on Google Map v3 by pressing ENTER按 ENTER 在 Google Map v3 上搜索地址
【发布时间】：2014-02-03 16:44:23
【问题描述】：

我有使用地理编码的 Java 脚本 Google Map Api v3。当我在搜索框中输入例如邮政编码时，我可以从列表中选择地址。如果我会做同样的事情并按 ENTER 什么都不会发生。如何修改代码？

<input id="address" type="textbox">

Java 脚本代码：

var geocoder;
var map;
var marker;

function initialize(){
  //MAP
  var latlng = new google.maps.LatLng(51.469186, -0.361166);
  var options = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), options);

  //GEOCODER
  geocoder = new google.maps.Geocoder();

  marker = new google.maps.Marker({
    map: map,
    draggable: false
  });

  //CIRCLE
  var circle = new google.maps.Circle({
    map: map,
    center: new google.maps.LatLng(51.469186, -0.361166),
    fillColor: '#204617',
    fillOpacity: 0.2,
    strokeColor: '#6DE953',
    strokeOpacity: 0.4,
    strokeWeight: 2
  });
  circle.setRadius(10000);
}

$(document).ready(function() { 

  initialize();

  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
    document.getElementById("address").focus();
  });
});

我已经尝试添加搜索按钮：

<input id="search" type="button" value="Search" onclick="codeAddress()">

并将函数 codeAddress() 添加到 Java Script 但我一定做错了什么，因为那没有用。

工作（不带 ENTER）jsfiddle

【问题讨论】：

我没有在您提供的代码中看到您的 codeAddress 函数，这将是问题所在。就像您为 on click 事件提供事件处理程序一样，您需要对 enter 事件执行相同的操作。
我已将 $(function() { 更改为 function codeAddress(){ 但这破坏了代码并且没有任何效果，因此我恢复了该更改。

标签： google-maps-api-3 geocoding

【解决方案1】：

你可以试试这个也许你会得到一些想法。 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

他们也在使用地理编码，所以你可以参考代码。

【讨论】：

该代码不能与 enter 一起使用。您必须从列表中选择地址。
一件事你可以调用 onkeypress() jquery 上的方法，如果 keycode = 32(enter) 则检查按下的键的键码然后执行搜索

【解决方案2】：

我不能 100% 确定您做错了什么，因为您没有发布所有代码。但是这个例子有效（我在 FF 中测试过）：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    <!-- Google Maps API -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>   
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>
    var geocoder;
var map;
var marker;

function initialize(){
  //MAP
  var latlng = new google.maps.LatLng(51.469186, -0.361166);
  var options = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), options);

  //GEOCODER
  geocoder = new google.maps.Geocoder();

  marker = new google.maps.Marker({
    map: map,
    draggable: false
  });

  //CIRCLE
  var circle = new google.maps.Circle({
    map: map,
    center: new google.maps.LatLng(51.469186, -0.361166),
    fillColor: '#204617',
    fillOpacity: 0.2,
    strokeColor: '#6DE953',
    strokeOpacity: 0.4,
    strokeWeight: 2
  });
  circle.setRadius(10000);
}
</script>

<script>
$(document).ready(function() { 

  initialize();

  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
    document.getElementById("address").focus();
  });
});


    </script>
    <style>
    /* style settings for Google map */
    #map_canvas
    {
        width : 500px;  /* map width */
        height: 500px;  /* map height */
    }
    </style>
</head>
<body onload="initialize()"> 
    <!-- Dislay Google map here -->
    <div id='map_canvas' ></div>
    <input id="address" type="textbox">
</body>
</html>

【讨论】：