javascript – 将地图外的标记拖动到html元素

前端之家收集整理的这篇文章主要介绍了javascript – 将地图外的标记拖动到html元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

欢迎任何建议!

示例小提琴:http://jsfiddle.net/y3YTS/26/

想要将标记拖到红色框上

最佳答案
这是你的黑客的解决方
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('
原文链接:https://www.f2er.com/js/429476.html

猜你在找的JavaScript相关文章