Google Maps API v3标记问题

马特乌斯·吉马良斯

我正在尝试对地图进行编码,您可以在其中搜索地址,它会显示一个包含自动完成项的列表,并且当您单击它时会将标记带到该地址。如果需要,您可以简单地拖动标记,而不使用地址搜索。
我使用的是v2并取得了成功-我可以获取lat和lng值并将其插入隐藏的输入中,以便稍后将其插入到数据库中。
使用V3,我能做的最好的事情就是显示地图并进行搜索,但是我可以将lat和lng插入隐藏的输入中,而无法更改唯一标记。
如果我创建了一个以文档开头的标记,则当您搜索并单击它时,将会创建另一个标记。

这是我的代码:

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文档上花费了很多时间,而且情况再好不过了。

莫勒博士

当您搜索地址时,SearchBox不适合,最好使用Places-Autocomplete。

要更改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 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);
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0
}
<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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

标记拖动事件Google Maps API V3

动画化不同的标记API V3 Google Maps

Google Maps Javascript API v3的标记

标记位置未获取-Google Maps API v3

Google Maps API v3唯一标记JS

Google Maps JS api v3延迟拖拽标记

Google Maps Javascript API V3中的旋转标记

Google Maps API v3 Firefox问题

多个图块问题Google Maps API v3 JS

Google Maps API v3 –使用复选框过滤标记(每个标记多个标记)

Google Maps v3 API错误

如何在Android的Google Maps API v3中更改标记大小?

google maps api v3在可拖动标记之间绘制折线

Google Maps API v3,“删除标记”图标或更改为“空”?

在Google Maps API v3中使用多个标记自动对中地图

Google Maps API v3将InfoWindow添加到每个标记

Google Maps JavaScript API v3更改标记并添加卫星视图

如何创建直接链接以访问特定的Google Maps API V3标记?

如何在Google Maps API v3中使用SVG标记

响应式 Google Maps API v3 - 在小屏幕上自动显示所有标记

地图标记无法呈现-Phonegap中的Google Maps Javascript API v3

由于自定义图像,Google Maps API v3 多个标记不起作用?

Google Maps v3 API - 自动平滑放大到标记

如何在Google Maps API v3中将类添加到标记

自定义 Google Maps API V3 标记标签

Google Maps API v3在单击的标记上添加阴影

Font Awesome图标作为Google Maps API V3中的标记

Google Maps v3 API和WordPress ACF:多个自定义标记

Google Maps v3 API:如何通过拖动更改路线来更新标记的位置?