在Google地图上通过拖放标记获取用户地址

时间:2018-08-28 10:26:58

标签: javascript google-maps

我的网站上有一张地图,我必须通过将标记拖放到地图上的任何地方来获取用户地址。我已成功在我的网站上显示地图。但是我不知道如何在地图上显示该标记,并可以拖动该标记并获得用户添加。我下面的地图代码是通过单击地图来获取用户地址。谢谢。

<div id='map-canvas'></div>

var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
  zoom: 10,
  center: myLatlng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(map, 'click', function(event) {
  geocoder.geocode({
    'latLng': event.latLng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        alert(results[0].formatted_address);
      }
    }
  });
});

1 个答案:

答案 0 :(得分:1)

您应在拖动端添加一个标记和一个侦听器

在此示例中,列表器显示了拖动结束点lat,lng和Performe地理编码

<div id='map-canvas'></div>

var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
  zoom: 10,
  center: myLatlng
}

var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

marker.addListener('dragend', function(event)  {
    alert(event.latLng.lat() + ' ' +  event.latLng.lng());
    geocoder.geocode({
    'latLng': event.latLng
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          alert(results[0].formatted_address);
        }
      }
    });
});


google.maps.event.addListener(map, 'click', function(event) {
  geocoder.geocode({
    'latLng': event.latLng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        alert(results[0].formatted_address);
      }
    }
  });
});