Question

我正在尝试创建一个像Airbnb这样的搜索字段，您可以在其中开始输入，它会自动完成您输入的内容。我开始使用jQuery Geocomplete但我似乎找不到为它设置CSS样式的方法。

任何人都可以指出我可以实现自己的地理位置自动完成或已经构建的可以使用的方法吗？

Answer 1

Google地图Places API Autocomplete for Addresses and Search Terms为您提供了自动填充搜索框的样式，请参阅Style the Autocomplete and SearchBox widgets部分，了解自动填充和SearchBox小部件的CSS类。

此外，我创建了一个快速演示，其中我以与Airbnb相同的方式为自动完成着色。希望这有帮助。

http://jsfiddle.net/agwsvk08/

Answer 2

以下是自动完成的示例以及地图和输入元素的样式。应该是一个很好的起点。

样式化

var FIDDLE_MAP = 'f_style';

function initialize() {

  var featureOpts = [{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#444444"
    }]
  }, {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [{
      "color": "#f2f2f2"
    }]
  }, {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road",
    "elementType": "all",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 45
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [{
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit",
    "elementType": "all",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "water",
    "elementType": "all",
    "stylers": [{
      "color": "#e15454"
    }, {
      "visibility": "on"
    }]
  }];


  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    scrollwheel: false,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, FIDDLE_MAP]
    },
    mapTypeId: FIDDLE_MAP
  });

  var styledMapOptions = {
    name: 'F Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(FIDDLE_MAP, customMapType);

  var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.621404, -74.033231),
    new google.maps.LatLng(40.752613, -73.632917));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */
    (
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */
    (input));

  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        content: place.name,
        position: place.geometry.location,
        anchorPoint: new google.maps.Point(-5, -35)
      });

      markers.push(marker);

      var infoWindow = new google.maps.InfoWindow({
        content: markers[i].content,
      });

      google.maps.event.addListener(marker, 'click', function(pointer, infoWindow) {
        return function() {
          infoWindow.open(map, pointer);
        };
      }(marker, infoWindow));

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);

  });

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

initialize();

 html,
 body,
 #map-canvas {
   height: 100%;
   margin: 0px;
   padding: 0px
 }
 ::-webkit-input-placeholder {
   color: #f00;
 }
 :-moz-placeholder {
   /* Firefox 18- */
   color: #f00;
 }
 ::-moz-placeholder {
   /* Firefox 19+ */
   color: #f00;
 }
 :-ms-input-placeholder {
   color: #f00;
 }
 .controls {
   margin-top: 16px;
   border: 1px solid transparent;
   border-radius: 2px 0 0 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   height: 32px;
   outline: none;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 #pac-input {
   background-color: #fff;
   font-family: Roboto;
   font-size: 16px;
   font-weight: 300;
   margin-top: 0px;
   padding: 0 11px 0 20px;
   text-overflow: ellipsis;
   width: 100%;
   height: 50px;
   border-bottom: 6px solid #f00;
   color: #F00;
   -webkit-transition: width 200ms, height 200ms, background-color 200ms, -webkit-transform 200ms;
   transition: width 200ms, height 200ms, background-color 200ms, transform 200ms;
 }
 #pac-input:focus {
   border-bottom: 6px solid #1c1c1c;
   background-color: rgba(255, 255, 255, 0.9);
   color: #1c1c1c;
   font-weight: 400;
   height: 55px;
 }
 .pac-container {
   border-bottom: 9px solid #F00;
   font-family: Roboto;
 }
 .pac-matched {
   font-size: 16px;
   color: #F00;
 }
 .pac-matched:hover {
   color: #40B7B8;
 }
 .pac-item {
   font-size: 16px;
   background-color: #fff;
 }
 #type-selector {
   color: #fff;
   background-color: #4d90fe;
   padding: 5px 11px 0px 11px;
 }
 #type-selector label {
   font-family: Roboto;
   font-size: 13px;
   font-weight: 300;
 }
 #target {
   width: 345px;
 }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<input id="pac-input" class="controls" type="text" placeholder="Search for Something">
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

建立像Airbnb一样的Geosearch Autocomplete

2 个答案: