有没有一种简单的方法可以将地图区域外的谷歌地图标记拖动到另一个html dom元素上.我已经尝试过各种各样的东西,看起来唯一的方法是破解并在jquery中创建一个重复的标记,然后将它悬停在当前标记上,这样看起来你已将它拖离地图.
欢迎任何建议！
示例小提琴：http://jsfiddle.net/y3YTS/26/
想要将标记拖到红色框上
有没有一种简单的方法可以将地图区域外的谷歌地图标记拖动到另一个html dom元素上.我已经尝试过各种各样的东西,看起来唯一的方法是破解并在jquery中创建一个重复的标记,然后将它悬停在当前标记上,这样看起来你已将它拖离地图.
欢迎任何建议！
示例小提琴：http://jsfiddle.net/y3YTS/26/
想要将标记拖到红色框上
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('+')
