admin管理员组文章数量:1022695
Is there an easy way to drag a google maps marker outside the map area onto another html dom element. I have tried allot of things and looks like the only way is to hack through and create a duplicate marker in jquery and just have it hover over the current marker so it appears you have dragged it off the map.
any suggestions wele!
Example Fiddle: /
want to drag the marker onto the red box
Is there an easy way to drag a google maps marker outside the map area onto another html dom element. I have tried allot of things and looks like the only way is to hack through and create a duplicate marker in jquery and just have it hover over the current marker so it appears you have dragged it off the map.
any suggestions wele!
Example Fiddle: http://jsfiddle/y3YTS/26/
want to drag the marker onto the red box
- why im looking for the easy way :) – duante Commented Sep 14, 2011 at 23:36
- jajaja well that's because i'm thinking a easy way to acplish this but somehow you have two listeners, one for the div of the red box, and the second way, for the div map to know when the mouse i living this div and enter in the red box, but it's not easy, to make the validations, and implement the event handlers sounds hard at least for me – Jorge Commented Sep 14, 2011 at 23:41
- this is really close to being done... i posted a dependency question... check the fiddle I have almost pleted – duante Commented Sep 15, 2011 at 6:01
2 Answers
Reset to default 4Here is solution with your hack http://jsfiddle/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./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!");
}
});
}
});
You've probably already acplished this, but just in case someone else is looking, here is a good starting place. This demo takes a marker that is off a map and allows you to drop it on the map. You want to do the reverse, but the concept is the same. Get the mouse location on mouseup event and then replace the marker's map with an html marker in that spot
Is there an easy way to drag a google maps marker outside the map area onto another html dom element. I have tried allot of things and looks like the only way is to hack through and create a duplicate marker in jquery and just have it hover over the current marker so it appears you have dragged it off the map.
any suggestions wele!
Example Fiddle: /
want to drag the marker onto the red box
Is there an easy way to drag a google maps marker outside the map area onto another html dom element. I have tried allot of things and looks like the only way is to hack through and create a duplicate marker in jquery and just have it hover over the current marker so it appears you have dragged it off the map.
any suggestions wele!
Example Fiddle: http://jsfiddle/y3YTS/26/
want to drag the marker onto the red box
- why im looking for the easy way :) – duante Commented Sep 14, 2011 at 23:36
- jajaja well that's because i'm thinking a easy way to acplish this but somehow you have two listeners, one for the div of the red box, and the second way, for the div map to know when the mouse i living this div and enter in the red box, but it's not easy, to make the validations, and implement the event handlers sounds hard at least for me – Jorge Commented Sep 14, 2011 at 23:41
- this is really close to being done... i posted a dependency question... check the fiddle I have almost pleted – duante Commented Sep 15, 2011 at 6:01
2 Answers
Reset to default 4Here is solution with your hack http://jsfiddle/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./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!");
}
});
}
});
You've probably already acplished this, but just in case someone else is looking, here is a good starting place. This demo takes a marker that is off a map and allows you to drop it on the map. You want to do the reverse, but the concept is the same. Get the mouse location on mouseup event and then replace the marker's map with an html marker in that spot
本文标签： javascriptdrag marker outside map to html elementStack Overflow
版权声明：本文标题：javascript - drag marker outside map to html element - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745549619a2155564.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论