0

我正在使用具有搜索字段的谷歌地图，并且当用户在该搜索字段中键入时，地图中的位置会发生变化，但如果用户在搜索字段中复制粘贴位置，那么位置也应该改变，但现在它是在复制粘贴事件上没有改变。

function centerLocation() {
  var zoom = 6;
  var position = {
    coords: {
      latitude: 77.040,
      longitude: 2.908
    }
  };
  var map = new google.maps.Map(document.getElementById('map'), {});
  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }
    console.log(places);
    if (places.length == 1) {
      var place = places[0];
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
      }
    } else {
      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
        map.fitBounds(bounds);
      });
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
function initialize() {
  centerLocation();
}
html,
body,
#map-container2,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&"></script>
<div id="map-container2" class="">
  <input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
  <div id="map"></div>
</div>

4

0 回答 0