从字段进行搜索后如何将可拖动标记添加到谷歌地图答案

【问题标题】：How to add a draggable marker to google map after making search from field从字段进行搜索后如何将可拖动标记添加到谷歌地图
【发布时间】：2018-01-26 16:16:59
【问题描述】：

我有一个谷歌地图，其中已经有多个可用的标记，最重要的是我有一个搜索字段，用户可以在其中使用地址或纬度/经度搜索位置。当页面第一次加载时，我有一个可拖动的标记“com_current”下降到一个点。之后，用户尝试从搜索字段中进行搜索。这个标记应该被放到那个位置。我正在使用地理完整。这显示了我搜索的位置，但我无法将此标记拖放到该位置。

var beaches = [
  ["Place A", 21.984606, 89.974250],
  ["West Bengal", 21.681855, 88.584980],
  ["Sea Beach", 21.617401, 87.500898]
];
var markers = [];
var map; //set scope here so various functions can use them

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var com_Image = {
    url: 'assets/img/single.png',
    size: new google.maps.Size(61, 72),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  };

  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }

  //set marker to mainlocation
  com_current = new google.maps.Marker({
    map: map,
    draggable: true,
    icon: 'https://cdn.sstatic.net/Sites/askubuntu/img/favicon.ico?v=eff8fd315b9e',
    animation: google.maps.Animation.DROP,
    position: {
      lat: 35.6895,
      lng: 139.6917
    }
  });

  $("#geocomplete").geocomplete({
    details: "form"
  }).bind("geocode:result", function(event, result) {
    var myLatlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat()), parseFloat(result.geometry.location.lng()));
    console.log(result.geometry.location.lat());
    map.panTo(myLatlng);
  });

}

html,
body {
  height: 100%;
  margin: 20px auto;
  padding: 0;
}

#map {
  height: 100%;
}

#geocomplete {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=&amp;libraries=places&callback=initialize"
async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.min.js"></script>

<input id="geocomplete" type="text" placeholder="Search Location">

<div id="map"></div>

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您可以使用marker.setPosition 方法：

marker.setPosition (new google.maps.LatLng( 48.864716, 2.349014 ));    // Paris

在您的代码中，您只需通过以下方式更改您的 geocomplete 函数：

$("#geocomplete").geocomplete({
    details: "form"
}).bind("geocode:result", function(event, result) {
    var myLatlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat()), parseFloat(result.geometry.location.lng()));
    com_current.setPosition (myLatlng);
    map.panTo(myLatlng);
});

如果您有任何问题或 cmets，请告诉我。

【讨论】：