谷歌地图API v3搜索框，带有可拖动的标记和输入框

google map api v3 search box with dragable marker and input box

本文关键字：拖动 输入 v3 API 搜索 谷歌地图      更新时间：2023-09-26

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

任何帮助表示赞赏，谢谢。

与您

提供的链接相同的 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);
相关文章：