javascript - 自动填充Google map 搜索栏(地址选择器)

Question

我想向我的用户提供一个文本框，他们可以在其中输入他们的地址。当他们输入地址时，会打开一个新窗口(Google map )并自动填充 Google map 中的搜索框。我想向用户提供他们尝试输入的地址的建议/预测。我还担心这个地址的相关性(例如，该地址不是跨越半个地球的地址)。

如何从其他网站输入的地址文本框中自动填充Google map 中的搜索框？

例如，在我的网站中，有一个文本框，我在该文本框中输入一个地址，当我在该文本框中单击 Enter 时，会出现一个新窗口，并显示带有搜索栏的 Google map (在该搜索栏中，地址已经存在)

这在 javascript 和 jquery 中可能吗？请帮我。我是那些 PL 的新手。谢谢

代码如下:

  (function($, window, document, undefined){

var defaults = {
bounds: true,
country: null,
map: false,
details: false,
detailsAttribute: "name",
autoselect: true,
location: false,

mapOptions: {
  zoom: 14,
  scrollwheel: false,
  mapTypeId: "roadmap"
},

markerOptions: {
  draggable: false
},

maxZoom: 16,
types: ['geocode'],
blur: false
 };


var componentTypes = ("street_address route intersection political " +
"country administrative_area_level_1 administrative_area_level_2 " +
"administrative_area_level_3 colloquial_area locality sublocality " +
"neighborhood premise subpremise postal_code natural_feature airport " +
"park point_of_interest post_box street_number floor room " +
"lat lng viewport location " +
"formatted_address location_type bounds").split(" ");

 var placesDetails = ("id url website vicinity reference name rating " +
"international_phone_number icon formatted_phone_number").split(" ");

// The actual plugin constructor.
function GeoComplete(input, options) {

this.options = $.extend(true, {}, defaults, options);

this.input = input;
this.$input = $(input);

this._defaults = defaults;
this._name = 'geocomplete';

this.init();
}

 // Initialize all parts of the plugin.
 $.extend(GeoComplete.prototype, {
 init: function(){
  this.initMap();
  this.initMarker();
  this.initGeocoder();
  this.initDetails();
  this.initLocation();
},

// Initialize the map but only if the option `map` was set.
// This will create a `map` within the given container
// using the provided `mapOptions` or link to the existing map instance.
initMap: function(){
  if (!this.options.map){ return; }

  if (typeof this.options.map.setCenter == "function"){
    this.map = this.options.map;
    return;
  }

  this.map = new google.maps.Map(
    $(this.options.map)[0],
    this.options.mapOptions
  );

  // add click event listener on the map
  google.maps.event.addListener(
    this.map,
    'click',
    $.proxy(this.mapClicked, this)
  );

  google.maps.event.addListener(
    this.map,
    'zoom_changed',
    $.proxy(this.mapZoomed, this)
  );
  },

// Add a marker with the provided `markerOptions` but only
// if the option was set. Additionally it listens for the `dragend` event
// to notify the plugin about changes.
initMarker: function(){
  if (!this.map){ return; }
  var options = $.extend(this.options.markerOptions, { map: this.map });

  if (options.disabled){ return; }

  this.marker = new google.maps.Marker(options);

  google.maps.event.addListener(
    this.marker,
    'dragend',
    $.proxy(this.markerDragged, this)
  );
 },

  // Associate the input with the autocompleter and create a geocoder
 // to fall back when the autocompleter does not return a value.
 initGeocoder: function(){

  var options = {
    types: this.options.types,
    bounds: this.options.bounds === true ? null : this.options.bounds,
    componentRestrictions: this.options.componentRestrictions
  };

  if (this.options.country){
    options.componentRestrictions = {country: this.options.country};
  }

  this.autocomplete = new google.maps.places.Autocomplete(
    this.input, options
  );

  this.geocoder = new google.maps.Geocoder();

  // Bind autocomplete to map bounds but only if there is a map
  // and `options.bindToMap` is set to true.
  if (this.map && this.options.bounds === true){
    this.autocomplete.bindTo('bounds', this.map);
  }

  // Watch `place_changed` events on the autocomplete input field.
  google.maps.event.addListener(
    this.autocomplete,
    'place_changed',
    $.proxy(this.placeChanged, this)
  );

  // Prevent parent form from being submitted if user hit enter.
  this.$input.keypress(function(event){
    if (event.keyCode === 13){ return false; }
  });

  // Listen for "geocode" events and trigger find action.
  this.$input.bind("geocode", $.proxy(function(){
    this.find();
  }, this));

  // Trigger find action when input element is blured out.
  // (Usefull for typing partial location and tabing to the next field
  // or clicking somewhere else.)
  if (this.options.blur === true){
    this.$input.blur($.proxy(function(){
      this.find();
    }, this));
   }
  },

// Prepare a given DOM structure to be populated when we got some data.
// This will cycle through the list of component types and map the
// corresponding elements.
initDetails: function(){
  if (!this.options.details){ return; }

  var $details = $(this.options.details),
    attribute = this.options.detailsAttribute,
    details = {};

  function setDetail(value){
    details[value] = $details.find("[" +  attribute + "=" + value + "]");
  }

  $.each(componentTypes, function(index, key){
    setDetail(key);
    setDetail(key + "_short");
  });

  $.each(placesDetails, function(index, key){
    setDetail(key);
  });

  this.$details = $details;
  this.details = details;
},

// Set the initial location of the plugin if the `location` options was set.
// This method will care about converting the value into the right format.
initLocation: function() {

  var location = this.options.location, latLng;

  if (!location) { return; }

  if (typeof location == 'string') {
    this.find(location);
    return;
  }

  if (location instanceof Array) {
    latLng = new google.maps.LatLng(location[0], location[1]);
  }

  if (location instanceof google.maps.LatLng){
    latLng = location;
  }

  if (latLng){
    if (this.map){ this.map.setCenter(latLng); }
    if (this.marker){ this.marker.setPosition(latLng); }
  }
},

// Look up a given address. If no `address` was specified it uses
// the current value of the input.
find: function(address){
  this.geocode({
    address: address || this.$input.val()
  });
},

// Requests details about a given location.
// Additionally it will bias the requests to the provided bounds.
geocode: function(request){
  if (this.options.bounds && !request.bounds){
    if (this.options.bounds === true){
      request.bounds = this.map && this.map.getBounds();
    } else {
      request.bounds = this.options.bounds;
    }
  }

  if (this.options.country){
    request.region = this.options.country;
  }

  this.geocoder.geocode(request, $.proxy(this.handleGeocode, this));
},

// Get the selected result. If no result is selected on the list, then get
// the first result from the list.
selectFirstResult: function() {
  //$(".pac-container").hide();

  var selected = '';
  // Check if any result is selected.
  if ($(".pac-item-selected")['0']) {
    selected = '-selected';
  }

  // Get the first suggestion's text.
  var $span1 = $(".pac-container .pac-item" + selected + ":first span:nth-child(2)").text();
  var $span2 = $(".pac-container .pac-item" + selected + ":first span:nth-child(3)").text();

  // Get the inputted address from LAP
  var 

  // Adds the additional information, if available.
  var firstResult = $span1;
  if ($span2) {
    firstResult += " - " + $span2;
  }

  this.$input.val(firstResult);

  return firstResult;
},

// Handles the geocode response. If more than one results was found
// it triggers the "geocode:multiple" events. If there was an error
// the "geocode:error" event is fired.
handleGeocode: function(results, status){
  if (status === google.maps.GeocoderStatus.OK) {
    var result = results[0];
    this.$input.val(result.formatted_address);
    this.update(result);

    if (results.length > 1){
      this.trigger("geocode:multiple", results);
    }

  } else {
    this.trigger("geocode:error", status);
  }
},

// Triggers a given `event` with optional `arguments` on the input.
trigger: function(event, argument){
  this.$input.trigger(event, [argument]);
},

// Set the map to a new center by passing a `geometry`.
// If the geometry has a viewport, the map zooms out to fit the bounds.
// Additionally it updates the marker position.
center: function(geometry){

  if (geometry.viewport){
    this.map.fitBounds(geometry.viewport);
    if (this.map.getZoom() > this.options.maxZoom){
      this.map.setZoom(this.options.maxZoom);
    }
  } else {
    this.map.setZoom(this.options.maxZoom);
    this.map.setCenter(geometry.location);
  }

  if (this.marker){
    this.marker.setPosition(geometry.location);
    this.marker.setAnimation(this.options.markerOptions.animation);
  }
},

// Update the elements based on a single places or geoocoding response
// and trigger the "geocode:result" event on the input.
update: function(result){

  if (this.map){
    this.center(result.geometry);
  }

  if (this.$details){
    this.fillDetails(result);
  }

  this.trigger("geocode:result", result);
},

// Populate the provided elements with new `result` data.
// This will lookup all elements that has an attribute with the given
// component type.
fillDetails: function(result){

  var data = {},
    geometry = result.geometry,
    viewport = geometry.viewport,
    bounds = geometry.bounds;

  // Create a simplified version of the address components.
  $.each(result.address_components, function(index, object){
    var name = object.types[0];
    data[name] = object.long_name;
    data[name + "_short"] = object.short_name;
  });

  // Add properties of the places details.
  $.each(placesDetails, function(index, key){
    data[key] = result[key];
  });

  // Add infos about the address and geometry.
  $.extend(data, {
    formatted_address: result.formatted_address,
    location_type: geometry.location_type || "PLACES",
    viewport: viewport,
    bounds: bounds,
    location: geometry.location,
    lat: geometry.location.lat(),
    lng: geometry.location.lng()
  });

  // Set the values for all details.
  $.each(this.details, $.proxy(function(key, $detail){
    var value = data[key];
    this.setDetail($detail, value);
  }, this));

  this.data = data;
},

// Assign a given `value` to a single `$element`.
// If the element is an input, the value is set, otherwise it updates
// the text content.
setDetail: function($element, value){

  if (value === undefined){
    value = "";
  } else if (typeof value.toUrlValue == "function"){
    value = value.toUrlValue();
  }

  if ($element.is(":input")){
    $element.val(value);
  } else {
    $element.text(value);
  }
},

// Fire the "geocode:dragged" event and pass the new position.
markerDragged: function(event){
  this.trigger("geocode:dragged", event.latLng);
},

mapClicked: function(event) {
    this.trigger("geocode:click", event.latLng);
},

mapZoomed: function(event) {
  this.trigger("geocode:zoom", this.map.getZoom());
},

// Restore the old position of the marker to the last now location.
resetMarker: function(){
  this.marker.setPosition(this.data.location);
  this.setDetail(this.details.lat, this.data.location.lat());
  this.setDetail(this.details.lng, this.data.location.lng());
},

 // Update the plugin after the user has selected an autocomplete entry.
 // If the place has no geometry it passes it to the geocoder.
 placeChanged: function(){
  var place = this.autocomplete.getPlace();

  if (!place || !place.geometry){
    if (this.options.autoselect) {
      // Automatically selects the highlighted item or the first item from the
      // suggestions list.
      var autoSelection = this.selectFirstResult();
      this.find(autoSelection);
    }
  } else {
    // Use the input text if it already gives geometry.
    this.update(place);
  }
}
 });

 // A plugin wrapper around the constructor.
// Pass `options` with all settings that are different from the default.
// The attribute is used to prevent multiple instantiations of the plugin.
 $.fn.geocomplete = function(options) {

var attribute = 'plugin_geocomplete';

// If you call `.geocomplete()` with a string as the first parameter
// it returns the corresponding property or calls the method with the
// following arguments.
if (typeof options == "string"){

  var instance = $(this).data(attribute) || $(this).geocomplete().data(attribute),
    prop = instance[options];

  if (typeof prop == "function"){
    prop.apply(instance, Array.prototype.slice.call(arguments, 1));
    return $(this);
  } else {
    if (arguments.length == 2){
      prop = arguments[1];
    }
    return prop;
  }
  } else {
  return this.each(function() {
    // Prevent against multiple instantiations.
    var instance = $.data(this, attribute);
    if (!instance) {
      instance = new GeoComplete( this, options );
      $.data(this, attribute, instance);
    }
  });
    }
   };

  })( jQuery, window, document );

Answer 1

AFIK，Google map 搜索 api 中使用的搜索栏是一个简单的文本框 (input type="text")，其 id 是 pac -输入

$('#pac-input').val($('your address element').val()); //copy the value
$('#pac-input').focus(); //focus might trigger automatically

JSfiddle