haritayı dışardan sürükleyin html elementi

Question

Harita alanı dışındaki bir google harita işaretleyicisini başka bir html dom öğesine sürüklemek için kolay bir yol var mı? Herşeyi denedim ve jQuery'de kopyalanıp bir işaretleyici oluşturmanın tek yolu gibi görünüyor ve sadece mevcut işaretin üzerine gelmesini sağladığından haritayı sürüklediniz.

herhangi bir öneri hoşgeldiniz!

Örnek Fiddle: Her ihtimale karşı birilerinin burada, http://jsfiddle.net/y3YTS/26/

want to drag the marker onto the red box

Answer 1

Muhtemelen bu başarılı ama ettik bakıyor bir good starting place olduğunu. Bu demo, haritadaki bir işaretçiyi işaretler ve haritaya bırakmanıza olanak tanır. Tersini yapmak istiyorsun, ama konsept aynı. mouseUp olayı fare konumunu alın ve sonra bu noktada İşte

Answer 2

yılında bir html işaretleyici ile işaretin harita yerine senin kesmek ile çözüm http://jsfiddle.net/H4Rp2/38/

var someData = [ 
    { 
     'name': 'Australia', 
     'location': [-25.274398, 133.775136] 
    }, 
    { 
     'name': 'La Svizra', 
     'location': [46.818188, 8.227512] 
    }, 
    { 
     'name': 'España', 
     'location': [40.463667, -3.74922] 
    }, 
    { 
     'name': 'France', 
     'location': [46.227638, 2.213749] 
    }, 
    { 
     'name': 'Ireland', 
     'location': [53.41291, -8.24389] 
    }, 
    { 
     'name': 'Italia', 
     'location': [41.87194, 12.56738] 
    }, 
    { 
     'name': 'United Kingdom', 
     'location': [55.378051, -3.435973] 
    }, 
    { 
     'name': 'United States of America', 
     'location': [37.09024, -95.712891] 
    }, 
    { 
     'name': 'Singapore', 
     'location': [1.352083, 103.819836] 
    } 
]; 















var gDrag = { 
    jq: {}, 
    item: {}, 
    status: 0, 
    y: 0, 
    x: 0 
} 


$(function(){ 

/*Google map*/ 
var mapCenter = new google.maps.LatLng(51.9226672, 4.500363500000049); 
var map = new google.maps.Map(
    document.getElementById('map'), 
    { 
     zoom: 4, 
     draggable: true, 
     center: mapCenter 
    } 
);  



    if(someData){ 

     gDrag.jq = $('#gmarker'); 

     /*LOOP DATA ADN CREATE MARKERS*/ 
     var markers = []; 
     for(var i = 0; i < someData.length; i++){ 

      markers.push(
       new google.maps.Marker({ 
        map: map, 
        draggable: false, 
        raiseOnDrag: false, 
        title: someData[i].name, 
        icon: 'http://icons.iconarchive.com/icons/aha-soft/standard-city/48/city-icon.png', 
        position: new google.maps.LatLng(someData[i].location[0], someData[i].location[1]), 

       }) 
      ); 

      //Block mouse with our invisible gmarker 
      google.maps.event.addListener(markers[i], 'mouseover', function(e){ 

       if(!gDrag.jq.hasClass('ui-draggable-dragging')){ 

        gDrag.item = this; 
        gDrag.jq.offset({ 
         top: gDrag.y - 10, 
         left: gDrag.x - 10 
        }); 


       } 
      }); 


     } 


     gDrag.jq.draggable({ 
      start: function(event, ui){ 
       console.log(gDrag.item.getIcon()) 
       gDrag.jq.html('<img src="'+gDrag.item.getIcon()+'" />'); 
       gDrag.item.setVisible(false); 
      }, 

      stop: function(event, ui){ 

       gDrag.jq.html(''); 

       /*Chech if targed was droped in our dropable area*/ 
       if(gDrag.status){ 
        gDrag.item.setVisible(false); 
       }else{ 
        gDrag.item.setVisible(true); 
       } 
      } 
     }); 

     $(document).mousemove(function(event){ 
      gDrag.x = event.pageX; 
      gDrag.y = event.pageY; 
     }); 



     $("#dropzone").droppable({ 
      accept: "#gmarker", 
      activeClass: "drophere", 
      hoverClass: "dropaccept", 
      drop: function(event, ui, item){ 
       gDrag.status = 1; 
       $(this).addClass("ui-state-highlight").html("Dropped!"); 
      } 
     }); 
    } 
});