Question

是否有一种简单的方法可以将地图区域外的Google地图标记拖到另一个html dom元素上。我已经尝试了很多东西，看起来唯一的方法是破解并在jquery中创建一个重复的标记，然后将它悬停在当前标记上，这样看起来你已将它拖离地图。

欢迎任何建议！

want to drag the marker onto the red box

Answer 1

这是你的黑客的解决方案 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!");
            }
        });
    }
});

Answer 2

你可能已经完成了这个，但是为了防止别人在看，这里是good starting place。此演示采用离开地图的标记，并允许您将其放在地图上。你想反过来，但概念是一样的。获取mouseup事件上的鼠标位置，然后用该点中的html标记替换标记的地图

拖动标记外部地图到HTML元素

2 个答案: