将标记外部映射到html元素 [英] drag marker outside map to html element
本文介绍了将标记外部映射到html元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有一种简单的方法可以将Google地图标记拖动到另一个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'，
'位置'：[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'：'美利坚合众国'，
'location'：[37.09024，-95.712891]
}，
{
'名称'：'新加坡'，
'地点'：[1.352083,103.819836]
}
];
var gDrag = {
jq：{}，
item：{}，
status：0，
y：0 ，
x：0
}
$（功能（）{
/ *谷歌地图* /
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创建标记* /
var markers = []; $ b $ （$ i $）
$ b marker.push（
new google.maps.Marker（{
map：map，
draggable：false，
raiseOnDrag：false，
titl e：someData [i] .name，
图标：'http://icons.iconarchive.com/icons/aha-soft/standard-city/48/city-icon.png'，
位置：new google.maps.LatLng（someData [i] .location [0]，someData [i] .location [1]），
}）
）;
//使用我们的隐形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
}）;
$ b}
}）;
$ b 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（''）;如果（gDrag.status）{
gDrag.item.setVisible（false）;
} $ / $ b $ * else {
gDrag.item.setVisible（true）;
}
}
}）;
$（document）.mousemove（function（event）{
gDrag.x = event.pageX;
gDrag.y = event.pageY;
}） ;
$ b $（＃dropzone）。droppable（{
accept：#gmarker，
activeClass：drophere，
hoverClass：dropaccept，
drop：function（event，ui，item）{
gDrag.status = 1;
$（this）.addClass（ui-state-highlight ）.html（Dropped！）;
}
}）;
}
}）;
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 welcome!
Example Fiddle: http://jsfiddle.net/y3YTS/26/
want to drag the marker onto the red box
解决方案
Here is solution with your 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!");
}
});
}
});
这篇关于将标记外部映射到html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
