Question

我是谷歌地图的新手，我正在努力学习它。

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

这是我的标记位置，当我初始化标记位置时比我知道地名（例如：XY街，纽约），但由于可拖动选项它正在改变，我的问题是如何我可以获得新的地名，我需要什么样的事件处理程序。

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

Answer 2

使用lat / lang在地图上设置位置并使标记可拖动

使用lat / lang最初在地图上的给定点设置标记
地址变量用于标题目的。它可以被忽略。
draggable：true 使标记可拖动。
使用事件监听器 google.maps.event.addListener（标记，＆＃39; dragend＆＃39;，功能（标记）监听标记位置的变化
```
tar
```

Answer 3

请按照以下三个步骤操作，以获取在文本框中具有位置的可拖动标记。

CSS

<style> #map { height: 400px; width: 100%; } </style>
HTML

<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" >
JavaScript

<script> /** *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); } ); } </script>  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap"> </script>
注意： 请在头部使用Jquery

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">

谷歌地图v3 draggable标记

4 个答案: