将 Jquery 拖放到 Google Map V3答案

【问题标题】：Drag and Drop Jquery to Google Map V3将 Jquery 拖放到 Google Map V3
【发布时间】：2015-02-12 14:42:33
【问题描述】：

场景：

我希望能够将项目拖放到 Google 地图并同时使用搜索框。将“纽约”(ui.draggable.text()) 列出的可拖动项目拖到谷歌地图中，它会在好地图中拉起纽约中心。

结果：

它可以工作，但它覆盖了原来的“地方搜索框”，我完全失去了搜索框，因为它填充了一张新地图......不知道如何调整下面的代码，所以我保存了所有删除的项目 + 删除选项并保留搜索框

地图上可放置的 div：

$('.dropit').droppable({
        drop: function(event, ui) {

            geocoder = new google.maps.Geocoder();
            var address = ui.draggable.text();
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                } else {
                  alert('Geocode was not successful for the following reason: ' + status);
                }
            });

            var mapOptions = {
               // center:  ui.draggable.text().geometry.location(),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            //ui.draggable.text() DISPLAY THIS ON MAP
        }
    });

【问题讨论】：

你应该提供完整的代码和一个例子jsfiddle。
该死，不知道如何设置 jsfiddle 哈哈……即使是基本的谷歌地图加载也让我头疼
如果您需要，这里是一张底图：jsfiddle.net/upsidown/Lw6tF

标签： javascript jquery google-maps google-maps-api-3 droppable

【解决方案1】：

不确定我是否清楚地理解了您的问题，但这里有一个示例地图，您可以在该地图上拖放位置项并同时使用“地点搜索”框。

HTML：

<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<ul>
    <li>New York, USA</li>
    <li>Shanghai, PRC</li>
    <li>London, UK</li>
    <li>Paris, France</li>
    <li>Sydney, Australia</li>
</ul>

JavaScript（拖放）：

$("ul li").each(function () {
    $(this).draggable({
        cursor: 'move',
        revert: true
    });
});

$('#map-canvas').droppable({

    drop: function (event, ui) {

        var el = ui.draggable;

        codeAddress(el.text());
        el.remove();
    }
});

JavaScript（地点搜索）：

function codeAddress(address) {

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

下面是一个工作演示。

JSFiddle demo

【讨论】：

谢谢。这就是我一直在寻找的。span>