2016-05-05 9 views
1

ここで、マーカーをドラッグアンドドロップします。私はlatを作成し、lngの座標divを作成しました。まずはdivはありません。ドラッグ&ドロップするとマーカーが作成されます。私はそれがlat、lng値を内側のdivに書き込むところにマーカーを残しました。 divを作成するたびにドラッグ&ドロップします。 Divsにはクラス名を再指定します。後でdivをクリックすると私はdivの価値を得ることができません。また、作成したdivをクリックすると、lat、lngの位置のマーカーを移動したいと思います。私は私の問題を説明できることを願っています。あなたはあなたがあなたのコード はい上記のグローバルようなマーカー、マップをdecalreする必要があります。またmarker.setPosition(緯度と経度) を必要とし、ここでhttp://jsfiddle.net/QvNUF/1015/Google map api draggable marker

<!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> 
+0

marker.setPosition(緯度と経度)を使用してみてください。 divのonclick – Poria

+0

私はmarker.setPosition(latlng)を使用しました。しかしそれはうまくいかなかった。私はdivの価値を得ることができません。私がドラッグアンドドロップするときは2回。 recenter nameクラスを持つ2 divsが作成されます。私はクラス名を増やさなければならない。例:recenter_1、recenter_2 –

+0

追加onclick = "movemarker(x、y);" evey divに関数を追加して関数のように関数を作成するmoveMarker(lat、lng){ var latlng = new google.maps.LatLng(parseFloat(lat)、parseFloat(lng)); marker.setPosition(latlng); } – Poria

答えて

1

まだ。あなたがそれらを作成するときは、直接<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/

+0

ありがとうございます。 İtは働いています! –

+0

私はこの回答が好きです(y) – Poria

+0

私はこのデモを私のサーバーで試してみるとエラーになります。未定義の 'toUrlValue'プロパティを読み取ることができません。この機能の代替? –

1

を見ることができ、私はあなたのフィドルをチェックします。私はclick()が作成されていないオブジェクトには影響しません、のdivが作成されている前に、あなたが.recenterのクリックリスナを追加するには、divの構造は、クラス属性の後のdivにonclick ="movemarker(x,y);"を追加..just知っているし、その後

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

あなたのお手伝いにも感謝します。 –