Google map api ziehbare Marker

Hier, wenn ich Marker ziehen und ablegen. Ich schreibe lat, lng Koordinaten erstellt div. Zuerst kein div. Wenn ich einen Marker ziehe, wird er erstellt. Ich verließ Marker, wo es lat, lng Wert nach innen div schreibt. Ich ziehe und drop jedes Mal anders ein div erstellt wird. Divs haben einen höheren Klassennamen. Später, wenn ich auf ein div klicke. Ich kann keinen Wert von div bekommen. Auch wenn ich auf ein erstelltes div klicke, möchte ich den Marker lat, lng positionieren. Ich hoffe, ich kann mein Problem erklären. Sie können http://jsfiddle.net/QvNUF/1015/Google map api ziehbare 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>

Quelle

2016-05-05 David Barbata

versuchen Sie es mit marker.setPosition (latlng); onclick der div – Poria

Ich verwendete marker.setPosition (latlng); aber es hat nicht funktioniert. Ich kann keinen Wert von div bekommen. Wenn ich zweimal drag and drop bin. Es werden 2 divs erstellt, die die Name-Klasse "recenter" haben. Ich muss wachsenden Klassennamen geben. Zum Beispiel recenter_1, recenter_2 –

Hinzufügen onclick = "movemarker (x, y);" auf evey div anhängen und dann Funktion wie Funktion erstellen moveMarker (lat, lng) { var latlng = neu google.maps.LatLng (parseFloat (lat), parseFloat (lng)); marker.setPosition (latlng); } – Poria

Sie fügen den Klick-Listener für .recenter bevor die divs erstellt wurden, werden click() keine Objekte betreffen, die nicht erstellt wurden noch.

Sie können die Klick-Listener für die <div/> ‚s direkt hinzufügen, wenn Sie sie erstellen:

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

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

Quelle

2016-05-05 08:43:43

vielen Dank. Es funktioniert!. –

Ich mag diese Antwort (y) – Poria

Wenn ich diese Demo auf meinem Server versuche, bekomme ich einen Fehler. Die Eigenschaft 'toUrlValue' von undefined kann nicht gelesen werden. Ist es eine Alternative diese Funktion? –

Sie benötigen marker.setPosition (latlng) Auch müssen Sie decalre Marker, Karte als Globals über dir Code ja hier, ich Ihre Geige überprüft. Ich kenne Ihre div Struktur ..just onclick ="movemarker(x,y);" auf div nach Klasse Attribut hinzufügen und dann

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

Quelle

2016-05-05 08:41:14 Poria

Auch danke für Ihre Hilfe. –

Google map api ziehbare Marker

Antwort

Verwandte Themen