Javascript 在谷歌地图内外拖放元素

我知道这里已经有答案了： , 但这并不是我所需要的

我有一个带有购物卡的“口袋妖怪商店”网站

当用户在那里签出订单时， 我想让他们把项目拖入谷歌地图，然后弹出放置位置

我还有一个问题：

每一件物品都需要保存在object中，并注明物品的详细信息和放置位置，地图上的每一件物品都应该是返回购物卡的选项。

有可能吗？

这是一个好的开始。 在地图上拖入拖出效果很好

添加API密钥

<style>
  html, body {
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
  }
  html, body, ul, li {
     padding: 0;
     margin: 0;
     list-style: none;
  }
  #dropzone {
    width: 10%;
    height: 500px;
  }
  #map {
    height: 500px;
    width: 85%;
    float: right;
  }
  #dropzone li {
    height: 120px;
    border: 1px solid #666666;
  }
  #dropzone li img {
    height: 64px;
  }
  #dropzone .message {
    color: #ff0000;
    font: +1;
  }
</style>

<div id="map" style=""></div>
<ul id="dropzone">
</ul>
<p>You can drag the icons inside the map, and you can drag the back out by dragging them to the left of the map</p>
<input id="dragged"><br>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_KEY&libraries=geometry"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script>
var iconWidth = 64;
var iconHeight = 64;
var pokemonData = [
  {
    id: '001',
    name: 'Bulbasaur',
    icon: 'http://www.poke-amph.com/frlg/sprites/large/002.png',
  },
  {
    id: '002',
    name: 'Ivysaur',
    icon: 'http://cdn.bulbagarden.net/upload/b/b0/Spr_3r_002.png',
  },
  {
    id: '003',
    name: 'Pikachu',
    icon: 'http://pldh.net/media/pokemon/gen3/emerald/025.png',
  },
  {
    id: '004',
    name: 'Charmander',
    icon: 'http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png',
  }];
var map;
var overlay; // @see http://stackoverflow.com/questions/5510972/google-maps-drag-and-drop-objects-into-google-maps-from-outside-the-map

// when the draggable image is dragged into the map.
// this is where you want to handle transaction prices ... 
function dragIn(e, icon, index) {
    var x = e.pageX - $('#map').offset().left;
    var y = e.pageY;
    if(x > 0) {
      // the image is inside the position of the map

      // skip doubles
      if(pokemonData[index].marker) {  // if you allow multiple of the same icons, remove this
        return true;
      }
      var point=new google.maps.Point(x, y);
      var position = overlay.getProjection().fromContainerPixelToLatLng(point);
      // add position to the object
      pokemonData[index].mapPosition = [position.lat(), position.lng()];
      generateMarkers([pokemonData[index]]);
      // reset icon position.  Feel free to hilight , or hide something ...
      $(icon).attr('style', 'position: relative; left: 0; top: 0;');
      $('#dropzone li').eq(index).find('.message').html('on map: ' + position.lat().toFixed(6) +','+ position.lng().toFixed(6));
      // TODO: add extra stuff here

    }
}

// when the draggable marker is dragged out of the map.
// this is where you want to handle transaction prices ... 
function dragOut(e, marker, index) {
  map.setOptions({draggable: true});
  // remove the marker from the map
  marker.setMap(null);
  pokemonData[index].marker = null;
  // extra display things
  var content = '<img src="'+ pokemonData[index].icon +'"/><br/>' + pokemonData[index].name;
  $('#dropzone li').eq(index).find('.message').html('marker taken off map');
  // TODO: add extra stuff here
}

function updateMarkerPosition(e, marker) {
  var index = pokemonData.itemIndex('marker', marker);
  var position = e.latLng;
  // update position
  $('#dropzone li').eq(index).find('.message').html('on map: ' + position.lat().toFixed(6) +','+ position.lng().toFixed(6));
}

function generatePageMarkers(data) {
  for (var i in data) {
    if(data[i].id) {
      var content = '<li><img data-id="'+ data[i].id +'" class="dragicon" src="'+ data[i].icon +'"/><br/><span class="name">' + data[i].name + '</span><div class="message"></div></li>';
      $('#dropzone').append(content);
    }
  }
  $('.dragicon').draggable({
      stop: function(e, ui) {
      var index = pokemonData.itemIndex('id', $(this).data('id'));
      dragIn(e, this, index);
    }
  });
}

function generateMarkers(data) {
    // generate the markers
    for (var i in data) {
      if(!data[i].id) {
        break;
      }
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].mapPosition[0], data[i].mapPosition[1]),
        map: map,
        draggable: true,
        //icon: data[i].icon,
        icon: {
          url: data[i].icon,
          size: google.maps.Size(iconWidth, iconHeight),
          target: google.maps.Point(iconWidth/2, iconHeight/2),
          origin: google.maps.Point(iconWidth/2, iconHeight/2)
        } ,
        title: data[i].name
      });

      google.maps.event.addListener(marker, 'dragend', function(e) {
        map.setOptions({draggable: true});
        updateMarkerPosition(e, this);
      })

      google.maps.event.addListener(marker, 'drag', function(e) {
        map.setOptions({draggable: false});
        var pixelPosition =  getPixelPosition(this);
        //var index = markers.indexOf(this);
        var index = pokemonData.itemIndex('marker', this);
        //if (pixelPosition.right <= 60) {// Get the marker out of the map
        if (pixelPosition.x <= 10) {// Get the marker out of the map
          dragOut(e, this, index);
        }
        //document.getElementById("dragged").value = 'x: ' + pixelPosition.x +' - right:'+ pixelPosition.right;
      })
      // store the variable in the array
      // markers.push(marker);
      data[i].marker = marker;
    }
}

Array.prototype.itemIndex = function(key, item) {
    for (i = 0; i < this.length; i++) {
      if(this[i][key] == item) {
        return i;
      }
    }
    return -1;
};

function initialize() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(50.5,  4.5),
        zoom: 7,
        mapTypeId: 'roadmap'
    });
    overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);

    //generateMarkers(pokemonData);
    generatePageMarkers(pokemonData);
}
    /**
    *  returns how many pixels the marker is from the map
    *  @see https://gist.github.com/keannan5390/3996774  (adapted by me)
    */
    function getPixelPosition (marker) {
      var scale = Math.pow(2, map.getZoom());
      var nw = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(),
        map.getBounds().getSouthWest().lng()
      );
      var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
      var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
      var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
      );
      return {
        x: pixelOffset.x,
        y: pixelOffset.y,
        right:  document.getElementById("map").clientWidth - pixelOffset.x,
        bottom: document.getElementById("map").clientHeight - pixelOffset.y
      };
    }

google.maps.event.addDomListener(window, 'load', initialize);
</script>

html，正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
html，body，ul，li{
填充：0；
保证金：0；
列表样式：无；
}
#下降区{
宽度：10%；
高度：500px；
}
#地图{
高度：500px；
宽度：85%；
浮动：对；
}
#滴水区李{
高度：120px；
边框：1px实心#666666；
}
#dropzone li img{
高度：64px；
}
#dropzone.message{
颜色：#ff0000；
字体：+1；
}


可以在地图内拖动图标，也可以通过将图标拖到地图左侧将其拖回



var-iconWidth=64；
var iconHeight=64；
变量pokemonada=[
{
id:'001'，
名称：'Bulbasaur'，
图标：'http://www.poke-amph.com/frlg/sprites/large/002.png',
},
{
id:'002'，
名称：“Ivysaur”，
图标：'http://cdn.bulbagarden.net/upload/b/b0/Spr_3r_002.png',
},
{
id:'003'，
名称：“皮卡丘”，
图标：'http://pldh.net/media/pokemon/gen3/emerald/025.png',
},
{
id:'004'，
姓名：'Charmander'，
图标：'http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png',
}];
var映射；
变量覆盖；//@看见http://stackoverflow.com/questions/5510972/google-maps-drag-and-drop-objects-into-google-maps-from-outside-the-map
//将可拖动图像拖动到地图中时。
//这是你想要处理交易价格的地方。。。
功能绘图（e、图标、索引）{
var x=e.pageX-$（'#map'）.offset（）.左；
var y=e.pageY；
如果（x>0）{
//图像位于地图的位置内
//跳过双打
如果（pokemonda[index].marker）{//如果允许多个相同的图标，请删除此图标
返回true；
}
var point=新的google.maps.point（x，y）；
var position=overlay.getProjection（）.fromContainerPixelToLatLng（点）；
//向对象添加位置
Pokemonda[index].mapPosition=[position.lat（），position.lng（）]；
生成标记（[pokemonda[index]]）；
//重置图标位置。请随意点亮或隐藏某些内容。。。
$（icon.attr（'style'，'position:relative；left:0；top:0；'）；
$（'#dropzone li'）.eq（index）.find（'.message'）.html（'在地图上：'+position.lat（）.toFixed（6）+'，'+position.lng（）.toFixed（6））；
//TODO:在此处添加额外内容
}
}
//将可拖动标记从地图中拖出时。
//这是你想要处理交易价格的地方。。。
功能排水沟（e、标记、索引）{
setOptions（{draggable:true}）；
//从地图上删除标记
marker.setMap（空）；
Pokemonda[index].marker=null；
//额外展示物品
var content='
'+pokemonda[index].name；
$（'#dropzone li'）.eq（index）.find（'.message'）.html（'marker off map'）；
//TODO:在此处添加额外内容
}
函数更新标记位置（e，标记）{
var index=pokemonda.itemIndex（'marker'，marker）；
var位置=e.latLng；
//更新位置
$（'#dropzone li'）.eq（index）.find（'.message'）.html（'在地图上：'+position.lat（）.toFixed（6）+'，'+position.lng（）.toFixed（6））；
}
函数生成器标记器（数据）{
用于（数据中的var i）{
if（数据[i].id）{
var content='

'+数据[i]。name+'
'；
$（'#dropzone'）。追加（内容）；
}
}
$（'.dragicon'）。可拖动({
停止：功能（e、ui）{
var index=pokemonda.itemIndex（'id'，$（this.data（'id'））；
dragIn（e，this，index）；
}
});
}
函数生成器标记（数据）{
//生成标记
用于（数据中的var i）{
如果（！data[i].id）{
打破
}
var marker=new google.maps.marker({
位置：新建google.maps.LatLng（数据[i].mapPosition[0]，数据[i].mapPosition[1]），
地图：地图，
真的，
//图标：数据[i]。图标，
图标：{
url:data[i]。图标，
大小：google.maps.size（iconWidth，iconHeight），
目标：google.maps.Point（iconWidth/2，iconHeight/2），
来源：google.maps.Point（iconWidth/2，iconHeight/2）
} ,
标题：数据[i]。名称
});
google.maps.event.addListener（标记'dragend'，函数（e）{
setOptions（{draggable:true}）；
更新标记位置（e，this）；
})
google.maps.event.addListener（标记'drag'，函数（e）{
setOptions（{draggable:false}）；
var pixelPosition=getPixelPosition（此）；
//var指数=markers.indexOf（本）；
var index=pokemonda.itemIndex（'marker'，this）；
//如果（pixelPosition.right，这是一个好的开始。
在地图上拖入拖出效果很好

添加API密钥

<style>
  html, body {
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
  }
  html, body, ul, li {
     padding: 0;
     margin: 0;
     list-style: none;
  }
  #dropzone {
    width: 10%;
    height: 500px;
  }
  #map {
    height: 500px;
    width: 85%;
    float: right;
  }
  #dropzone li {
    height: 120px;
    border: 1px solid #666666;
  }
  #dropzone li img {
    height: 64px;
  }
  #dropzone .message {
    color: #ff0000;
    font: +1;
  }
</style>

<div id="map" style=""></div>
<ul id="dropzone">
</ul>
<p>You can drag the icons inside the map, and you can drag the back out by dragging them to the left of the map</p>
<input id="dragged"><br>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_KEY&libraries=geometry"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script>
var iconWidth = 64;
var iconHeight = 64;
var pokemonData = [
  {
    id: '001',
    name: 'Bulbasaur',
    icon: 'http://www.poke-amph.com/frlg/sprites/large/002.png',
  },
  {
    id: '002',
    name: 'Ivysaur',
    icon: 'http://cdn.bulbagarden.net/upload/b/b0/Spr_3r_002.png',
  },
  {
    id: '003',
    name: 'Pikachu',
    icon: 'http://pldh.net/media/pokemon/gen3/emerald/025.png',
  },
  {
    id: '004',
    name: 'Charmander',
    icon: 'http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png',
  }];
var map;
var overlay; // @see http://stackoverflow.com/questions/5510972/google-maps-drag-and-drop-objects-into-google-maps-from-outside-the-map

// when the draggable image is dragged into the map.
// this is where you want to handle transaction prices ... 
function dragIn(e, icon, index) {
    var x = e.pageX - $('#map').offset().left;
    var y = e.pageY;
    if(x > 0) {
      // the image is inside the position of the map

      // skip doubles
      if(pokemonData[index].marker) {  // if you allow multiple of the same icons, remove this
        return true;
      }
      var point=new google.maps.Point(x, y);
      var position = overlay.getProjection().fromContainerPixelToLatLng(point);
      // add position to the object
      pokemonData[index].mapPosition = [position.lat(), position.lng()];
      generateMarkers([pokemonData[index]]);
      // reset icon position.  Feel free to hilight , or hide something ...
      $(icon).attr('style', 'position: relative; left: 0; top: 0;');
      $('#dropzone li').eq(index).find('.message').html('on map: ' + position.lat().toFixed(6) +','+ position.lng().toFixed(6));
      // TODO: add extra stuff here

    }
}

// when the draggable marker is dragged out of the map.
// this is where you want to handle transaction prices ... 
function dragOut(e, marker, index) {
  map.setOptions({draggable: true});
  // remove the marker from the map
  marker.setMap(null);
  pokemonData[index].marker = null;
  // extra display things
  var content = '<img src="'+ pokemonData[index].icon +'"/><br/>' + pokemonData[index].name;
  $('#dropzone li').eq(index).find('.message').html('marker taken off map');
  // TODO: add extra stuff here
}

function updateMarkerPosition(e, marker) {
  var index = pokemonData.itemIndex('marker', marker);
  var position = e.latLng;
  // update position
  $('#dropzone li').eq(index).find('.message').html('on map: ' + position.lat().toFixed(6) +','+ position.lng().toFixed(6));
}

function generatePageMarkers(data) {
  for (var i in data) {
    if(data[i].id) {
      var content = '<li><img data-id="'+ data[i].id +'" class="dragicon" src="'+ data[i].icon +'"/><br/><span class="name">' + data[i].name + '</span><div class="message"></div></li>';
      $('#dropzone').append(content);
    }
  }
  $('.dragicon').draggable({
      stop: function(e, ui) {
      var index = pokemonData.itemIndex('id', $(this).data('id'));
      dragIn(e, this, index);
    }
  });
}

function generateMarkers(data) {
    // generate the markers
    for (var i in data) {
      if(!data[i].id) {
        break;
      }
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].mapPosition[0], data[i].mapPosition[1]),
        map: map,
        draggable: true,
        //icon: data[i].icon,
        icon: {
          url: data[i].icon,
          size: google.maps.Size(iconWidth, iconHeight),
          target: google.maps.Point(iconWidth/2, iconHeight/2),
          origin: google.maps.Point(iconWidth/2, iconHeight/2)
        } ,
        title: data[i].name
      });

      google.maps.event.addListener(marker, 'dragend', function(e) {
        map.setOptions({draggable: true});
        updateMarkerPosition(e, this);
      })

      google.maps.event.addListener(marker, 'drag', function(e) {
        map.setOptions({draggable: false});
        var pixelPosition =  getPixelPosition(this);
        //var index = markers.indexOf(this);
        var index = pokemonData.itemIndex('marker', this);
        //if (pixelPosition.right <= 60) {// Get the marker out of the map
        if (pixelPosition.x <= 10) {// Get the marker out of the map
          dragOut(e, this, index);
        }
        //document.getElementById("dragged").value = 'x: ' + pixelPosition.x +' - right:'+ pixelPosition.right;
      })
      // store the variable in the array
      // markers.push(marker);
      data[i].marker = marker;
    }
}

Array.prototype.itemIndex = function(key, item) {
    for (i = 0; i < this.length; i++) {
      if(this[i][key] == item) {
        return i;
      }
    }
    return -1;
};

function initialize() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(50.5,  4.5),
        zoom: 7,
        mapTypeId: 'roadmap'
    });
    overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);

    //generateMarkers(pokemonData);
    generatePageMarkers(pokemonData);
}
    /**
    *  returns how many pixels the marker is from the map
    *  @see https://gist.github.com/keannan5390/3996774  (adapted by me)
    */
    function getPixelPosition (marker) {
      var scale = Math.pow(2, map.getZoom());
      var nw = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(),
        map.getBounds().getSouthWest().lng()
      );
      var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
      var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
      var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
      );
      return {
        x: pixelOffset.x,
        y: pixelOffset.y,
        right:  document.getElementById("map").clientWidth - pixelOffset.x,
        bottom: document.getElementById("map").clientHeight - pixelOffset.y
      };
    }

google.maps.event.addDomListener(window, 'load', initialize);
</script>


html，正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
html，body，ul，li{
填充：0；
保证金：0；
列表样式：无；
}
#下降区{
宽度：10%；
高度：500px；
}
#地图{
高度：500px；
宽度：85%；
浮动：对；
}
#滴水区李{
高度：120px；
边框：1px实心#666666；
}
#dropzone li img{
高度：64px；
}
#dropzone.message{
颜色：#ff0000；
字体：+1；
}


可以在地图内拖动图标，也可以通过将图标拖到地图左侧将其拖回



var-iconWidth=64；
var iconHeight=64；
变量pokemonada=[
{
id:'001'，
名称：'Bulbasaur'，
集成电路