谷歌地图 api 可拖动标记答案

【问题标题】：Google map api draggable marker谷歌地图 api 可拖动标记
【发布时间】：2016-08-30 22:18:45
【问题描述】：

当我拖放标记时。我写了 lat,lng 坐标创建的 div。首先没有任何div。当我创建拖放标记时。我留下了将 lat,lng 值写入 div 内部的标记。每次创建不同的 div 时，我都会拖放。 div 具有最近的类名。稍后当我单击一个 div 时。我无法获得 div 的价值。此外，当我单击创建的 div 时，我想移动该 lat,lng 位置的标记。我希望我能解释我的问题。你可以看这里http://jsfiddle.net/QvNUF/1015/

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng"><br>
<button id="selected">Selected Coordinates</button>
<button id="clear">Clear history</button>
<div id="results" ></div>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(41.015137,28.979530);
var myOptions = {
  zoom: 10, 
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
    addMarker(event.latLng, 'Click Generated Marker', map);
});
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: title,
        draggable:true
});
marker.addListener('drag',function(event) {
     $('#lat').val(event.latLng.lat())  ;
    $('#lng').val(event.latLng.lng())  ;
});
marker.addListener('dragend',function(event) {
    $('#lat').val(event.latLng.lat())  ;        
    $('#lng').val(event.latLng.lng())  ;
    var x=event.latLng.lat();
    var y=event.latLng.lng();
    $("#results").append('<div class="recenter">'+x+y+'</div>');
});
};  
    $('.recenter').click( function() {
        var a=$(this).text();
        alert(a);
    });
    $("#clear").click(function(){
        $("#results").text("");
        $("#results").hide();
    });
initialize();
</script>
</body></html>

【问题讨论】：

尝试使用 marker.setPosition(latlng); div的onclick
我使用了 marker.setPosition(latlng);但它没有用。我无法获得 div 的价值。当我拖放两次时。创建了 2 个具有最近名称类的 div。我必须给出不断增长的班级名称。例如，recenter_1、recenter_2
添加 onclick ="movemarker(x,y);"在每个 div 上附加然后创建函数，例如 function moveMarker(lat,lng) { var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));标记.setPosition(latlng); }
你是对的。但首先，当创建一个具有更新类名的 div 时。它正在写 div 的 lat、lng 值。稍后我必须使用您所说的功能。
我不只是创建一个 div。每次拖放都会创建一个 div。

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

【解决方案1】：

你需要 marker.setPosition(latlng) 此外，您将不得不标记标记，将其映射为代码上方的全局变量是的，我检查了你的小提琴。我知道你的 div 结构..只需在类属性后的 div 上添加onclick ="movemarker(x,y);"，然后

function moveMarker(lat,lng) { 
//console.log("lat:"+x+" lng:"+y);
var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); marker.setPosition(latlng);
}

【讨论】：

【解决方案2】：

在创建 div 之前为.recenter 添加点击监听器，click() 不会影响尚未创建的对象。

您可以在创建 <div/> 时直接为它们添加点击侦听器：

$("#results")
 .append($('<div>')
          .text(event.latLng.toUrlValue())
          .data('latlng',event.latLng)
          .click(function(){
                  marker.setPosition($(this).data('latlng'));
                 }));

http://jsfiddle.net/doktormolle/QvNUF/1022/

【讨论】：

我喜欢这个答案（y）
当我在我的服务器上尝试这个演示时，我得到一个错误。无法读取未定义的属性“toUrlValue”。是这个功能的替代品吗？