在没有标记的情况下使用 GeoComplete

Question

我正在使用 this plugin 来自动完成位置输入字段。

到目前为止我所做的是-

$(function()
{
 $("#find_product_location").geocomplete(
 {
  map   : "#product_location",
  mapOptions :
  {
   mapTypeId : 'roadmap',  //roadmap, satellite,hybrid, terrain,
   scrollwheel : true,
   zoom: 10,
   center : new google.maps.LatLng(37.42152681633113, -119.27327880000001),
  },
  markerOptions:
  {
   draggable: true
  },
 })
  .bind("geocode:result", function(event, result)
  {
   console.log('Success');
   //console.log(result);
  })
  .bind("geocode:error", function(event, status)
  {
   console.log('Error');
   //console.log(status);
  })
  .bind("geocode:multiple", function(event, results)
  {
   console.log('Multiple');
   //console.log(results);
  });
});

#product_location
{ 
 width: 100%; 
 height: 400px;
}

<input id="find_product_location" type="text" placeholder="Type Your Address"/>
<input id="find" type="button" value="find" />

<div id="product_location"></div>

<script src="http://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.min.js"></script>

But the problem is, when a location is selected, there is a marker created and the marker is showed in the map.

我的要求是这里不要标记

我只想拥有其他功能（自动缩放设置、在地图中更改位置等）。

有人可以帮忙吗？

Answer 1

您可以使用官方 Google 地图 API - Place Autocomplete 自动完成是 Google 地图 JavaScript API。您可以使用自动完成功能为您的应用程序提供 Google 地图搜索字段的预先输入搜索行为。当用户开始输入地址时，自动完成功能将填写其余部分。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13
  });
  var input = /** @type {!HTMLInputElement} */(
      document.getElementById('pac-input'));

  var types = document.getElementById('type-selector');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);


    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    radioButton.addEventListener('click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-address', ['address']);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);
}

在没有标记的情况下使用 GeoComplete

Using GeoComplete Without Marker

javascript

jquery

google-maps

google-maps-api-3

geocomplete