Question

我正在使用谷歌地图api v3。我想实现像这样的谷歌地图 - https://developers.google.com/maps/documentation/javascript/examples/places-searchbox ，但有可拖动标记，将当前lat，lng分别放入两个不同的输入框。

感谢任何帮助，谢谢。

Answer 1

与您提供的链接相同的HTML。

我刚刚添加了

<input id="lat"> 
<input id="lng">

标记中的某处。

function initialize() {
  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);
  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));
  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);
    }
    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)
      };
      var marker = new google.maps.Marker({
        draggable: true,
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });
      // drag response
      google.maps.event.addListener(marker, 'dragend', function(e) {
        displayPosition(this.getPosition());
      });
      // click response
      google.maps.event.addListener(marker, 'click', function(e) {
        displayPosition(this.getPosition());
      });
      markers.push(marker);
      bounds.extend(place.geometry.location);
    }
    map.fitBounds(bounds);
  });
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
  // displays a position on two <input> elements
  function displayPosition(pos) {
    document.getElementById('lat').value = pos.lat();
    document.getElementById('lng').value = pos.lng();
  }
}  
google.maps.event.addDomListener(window, 'load', initialize);

谷歌地图api v3搜索框与可拖动标记和输入框

1 个答案: