javascript - 将 map 外的标记拖到 html 元素

Question

有没有一种简单的方法可以将 map 区域外的谷歌地图标记拖到另一个 html dom 元素上。我已经尝试了很多事情，看起来唯一的方法是破解并在 jquery 中创建一个重复的标记，然后将其悬停在当前标记上，这样看起来您已将其拖出 map 。

欢迎提出任何建议!

示例 fiddle :http://jsfiddle.net/y3YTS/26/

想把marker拖到红框上

Answer 1

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