Question

我使用Geocoding工作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但我必须做错了，因为它没有用。

工作（不输入）jsfiddle

Answer 1

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

他们也在使用地理编码，因此您可以参考代码。

Answer 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>

按Enter键在Google Map v3上搜索地址

2 个答案: