谷歌地图V3可拖动标记

Question

我是google maps的新手，正在努力学习。

marker = new google.maps.Marker(
{
     map:map,
     draggable:true,
     animation: google.maps.Animation.DROP,
     position: results[0].geometry.location
});

这是我的标记位置。当我初始化标记位置时，我知道地点名称（例如：纽约市XY街），但由于可拖动选项而发生变化。我的问题是如何获取新的地点名称，需要哪个事件处理程序。

- Mokus

Answer 1

最终我找到了答案：

marker = new google.maps.Marker(
{
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'dragend', function() 
{
    geocodePosition(marker.getPosition());
});

function geocodePosition(pos) 
{
   geocoder = new google.maps.Geocoder();
   geocoder.geocode
    ({
        latLng: pos
    }, 
        function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                $("#mapSearchInput").val(results[0].formatted_address);
                $("#mapErrorMsg").hide(100);
            } 
            else 
            {
                $("#mapErrorMsg").html('Cannot determine address at this location.'+status).show(100);
            }
        }
    );
}

来源于The Wizz.art

- Mokus

---

“dragend”是什么，它在哪里使用？我复制了你的代码并运行，但我无法在函数内打印状态或结果。 - IshaS

dragend是由Google Maps API触发的事件。它监听标记被放回地图时要执行的操作。 - toobulkeh

@ohlala，你的代码对我来说很好用，但是#mapSearchInput中的地址不符合我的要求，比如当我在商店上放置标记时，它不会显示商店名称，而是显示没有商店名称的街道地址。请帮忙解决一下。 - Sandeep

marker.getPosition() 有时会给出错误的坐标，特别是在河上方。 - Chan

Answer 2

使用经纬度在地图上设置位置并使标记可拖动

• 使用经纬度最初在地图上设置标记在给定点

• 地址变量用于标题目的，可以忽略。

• draggable:true 使标记可拖动。

• 使用事件监听器 google.maps.event.addListener(marker, 'dragend', function(marker) 监听标记位置的更改。

function showMap(lat,lang,address) {
var myLatLng = {lat: lat, lng: lang};

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 17,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: address,
      draggable:true,
    });

    google.maps.event.addListener(marker, 'dragend', function(marker){
        var latLng = marker.latLng; 
        currentLatitude = latLng.lat();
        currentLongitude = latLng.lng();
        jQ("#latitude").val(currentLatitude);
        jQ("#longitude").val(currentLongitude);
     }); 
}

- Ahmad Vaqas Khan

---

请注意代码区域外的花括号。我试图更改它，但无论我尝试什么，都无法使代码标记在此答案上正常工作。有人知道原因吗？还有其他人能修复它吗？ - Colin R. Turner

Answer 3

/**
 *Receiving the value of text box and type done conversion by Number() 
 */
var latitude = Number(document.getElementById("la").value);
var longitude = Number(document.getElementById("lo").value);

function initMap() {
  /**
   *Passing the value of variable received from text box
   **/
  var uluru = {
    lat: latitude,
    lng: longitude
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: uluru
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: uluru
  });
  google.maps.event.addListener(marker, 'dragend',
    function(marker) {
      currentLatitude = marker.position.lat();
      currentLongitude = marker.position.lng();
      $("#la").val(currentLatitude);
      $("#lo").val(currentLongitude);
    }
  );
}

#map {
  height: 400px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
Latitude <input type="text" id="la" name="latitude" value="28.39"> Longitude<input type="text" id="lo" name="longitude" value="84.12">

<!--Google Map API Link-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap">

- Abdul MANAN Hamza

Answer 4

以下是代码，它可以在文本框中获取可拖动的标记位置：

/**
 *Receiving the value of text box and type done conversion by Number() 
 */
var latitude = Number(document.getElementById("la").value);
var longitude = Number(document.getElementById("lo").value);

function initMap() {
  /**
   *Passing the value of variable received from text box
   **/
  var uluru = {
    lat: latitude,
    lng: longitude
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: uluru
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: uluru
  });
  google.maps.event.addListener(marker, 'dragend',
    function(marker) {
      var latLng = marker.latLng;
      currentLatitude = latLng.lat();
      currentLongitude = latLng.lng();
      $("#la").val(currentLatitude);
      $("#lo").val(currentLongitude);
    }
  );
}

#map {
  height: 400px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
Latitude <input type="text" id="la" name="latitude" value="28.39"> Longitude<input type="text" id="lo" name="longitude" value="84.12">

<!--Google Map API Link-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap">

请在头部使用jQuery。

- Ramesh KC

---

请修正这段 Markdown 代码的格式。将其放进一个单一的代码标签中以节省空间。 - Liam Bolling