Question

我正在尝试编写一个可以搜索地址的地图，它会显示一个包含自动完成项目的列表，当您点击它时会将标记带到地址。如果您愿意，只需拖动标记即可，不要使用地址搜索。
我正在使用v2并且成功了 - 我可以获取lat和lng值并将它们插入到隐藏的输入中，所以稍后我可以将它们插入到DB中。使用V3，我能做的最好的事情就是显示一个地图并使搜索工作，但我可以将lat和lng插入到隐藏的输入中，我无法使ONLY标记更改位置。
如果我创建一个标记以开始文档，当您搜索并单击它时，将创建另一个标记。

这是我的代码：

function initialize() {

    var myLatlng = new google.maps.LatLng(-1.456688, -48.477586);
  var mapOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };




  var markers = [];
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      draggable: true,
      title: 'Hello World!'
  });


  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-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,
        title: place.name,
        position: place.geometry.location,
        draggable: true
      });

      markers.push(marker);

      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);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

我很抱歉这么多，但我真的花了一整天的时间来研究API文件并且无法让它变得更好。

Answer 1

SearchBox不适合搜索地址，最好使用Places-Autocomplete。

要更改ONLY标记的位置，您只需设置标记的位置属性。

＆＃13;

function initialize() {

  var myLatlng = new google.maps.LatLng(-1.456688, -48.477586);
  var mapOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true,
    title: 'Hello World!'
  });

  //set the value of the hidden inputs when the position changes
  google.maps.event.addListener(marker, 'position_changed', function() {
    document.getElementById('latitude').value = this.getPosition().lat();
    document.getElementById('longitude').value = this.getPosition().lng();
  });

  // Create an Autocomplete and link it to the UI element.
  var input = /** @type {HTMLInputElement} */ (
    document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);

  var searchBox = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (input), {
      types: ['geocode']
    });

  // 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, 'place_changed', function() {
    var place = this.getPlace();
    //when place has been found
    if (place.geometry) {
      marker.setOptions({
        title: place.name,
        position: place.geometry.location
      });
      if (place.geometry.viewport) {
        marker.getMap().fitBounds(place.geometry.viewport);
      } else {
        marker.getMap().setCenter(place.geometry.location);
      }
    }
    //otherwise
    else {
      marker.setOptions({
        title: null
      });
      alert('place not found');
    }
  });

  // 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);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0
}

＆＃13;

<script src="//maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>
<input id="pac-input"/>
<input type="hidden" id="latitude"/>
<input type="hidden" id="longitude"/>
<div id="map"></div>

＆＃13;

Google会映射API v3标记问题

1 个答案: