谷歌地图 v3 可拖动标记

Posted 2023-02-23

【中文标题】谷歌地图 v3 可拖动标记

【英文标题】：Google maps v3 draggable marker

【发布时间】：2011-08-07 00:30:07

【问题描述】：

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

marker = new google.maps.Marker(

     map:map,
     draggable:true,
     animation: google.maps.Animation.DROP,
     position: results[0].geometry.location
);

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

【参考方案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

【讨论】：

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

dragend 是由 google maps API 触发的事件。这是监听当标记被放回地图时要做什么。

@ohlala 您的代码对我来说很好用，但是#mapSearchInput 中的地址不符合我的要求，就像我将标记放在商店上它不显示商店名称但显示街道地址而不店名。请帮助

marker.getPosition() 有时给出的坐标不正确，尤其是在河流上

【参考方案2】：

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

使用 lat/lang 最初会在地图上的给定点设置一个标记

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

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

【讨论】：

^^ 请注意代码区域外的杂散花括号。我试图改变它，但无论我尝试什么，我都无法让代码标记在这个答案上正常工作。有谁知道为什么？别人能解决吗？

【参考方案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">

【参考方案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

【讨论】：

请修复markdown中这段代码的格式。只需将其放在单个代码标记中即可节省空间