Question

到目前为止，我所拥有的是根据用户提供的街道地址放置酒吧位置的地图。

但现在我需要关联一个图标来描述用户所拥有的条形类型。所以我的地图右侧有一个图标列表，地图内有标记。

有没有办法拖放用户选择的图像并将此标记替换为新图像？

我们的想法是捕获被拖动的图标，将当前标记替换为新标记，并将信息存储到我的数据库中。我想我可以做最后一部分，但我对前两部分没有太多了解:(

任何有关如何开始的指南都将非常感激：）

Answer 1

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>MVC is Fun</title>

        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            html { height: 100% }
            body{ height: 100%; margin: 0px; padding: 0px;}
            #map_canvas { height: 50% }
            #shelf{position:fixed; top:10px; left:500px; height:100px;width:200px;background:white;opacity:0.7;}
            #draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
        </style>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#draggable").draggable({helper: 'clone',
                    stop: function(e) {
                        var point=new google.maps.Point(e.pageX,e.pageY);
                        var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
                        var icon = $(this).attr('src');
                        placeMarker(ll, icon);
                    }
                });
                $("#draggable2").draggable({helper: 'clone',
                    stop: function(e) {
                        var point=new google.maps.Point(e.pageX,e.pageY);
                        var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
                        var icon = $(this).attr('src');
                        placeMarker(ll, icon);
                    }
                });
                $("#draggable3").draggable({helper: 'clone',
                    stop: function(e) {
                        var point=new google.maps.Point(e.pageX,e.pageY);
                        var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
                        var icon = $(this).attr('src');
                        placeMarker(ll, icon);
                    }
                });
                $("#draggable4").draggable({helper: 'clone',
                    stop: function(e) {
                        var point=new google.maps.Point(e.pageX,e.pageY);
                        var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
                        var icon = $(this).attr('src');
                        placeMarker(ll, icon);
                    }
                });
                $("#draggable5").draggable({helper: 'clone',
                    stop: function(e) {
                        var point=new google.maps.Point(e.pageX,e.pageY);
                        var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
                        var icon = $(this).attr('src');
                        placeMarker(ll, icon);
                    }
                });
            });
        </script>
        <script type="text/javascript">
            var $map;
            var $latlng;
            var overlay;
            function initialize() {
                var $latlng = new google.maps.LatLng(66.5, 25.733333);
                var myOptions = {
                    zoom: 3,
                    center: $latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                        position: google.maps.ControlPosition.TOP_LEFT },
                    zoomControl: true,
                    zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.LARGE,
                        position: google.maps.ControlPosition.LEFT_TOP
                    },
                    scaleControl: true,
                    scaleControlOptions: {
                        position: google.maps.ControlPosition.TOP_LEFT
                    },
                    streetViewControl: false,

                    panControl:false,

                };
                $map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);

                overlay = new google.maps.OverlayView();
                overlay.draw = function() {};
                overlay.setMap($map);
            } 
            function placeMarker(location, icon) {
                var marker = new google.maps.Marker({
                    position: location, 
                    map: $map,
                    icon: icon
                });

            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas"></div>
        <div id='shelf'>
            <ul>
                <li>
                    <img src="ico_beer.png" id="draggable" />
                </li>
                <li>
                    <img src="ico_comedy.png" id="draggable2" />
                </li>
                <li>
                    <img src="ico_dance_club.png" id="draggable3" />
                </li>
                <li>
                    <img src="ico_food.png" id="draggable4" />
                </li>
                <li>
                    <img src="ico_karaoke.png" id="draggable5" />
                </li>
            </ul>
        </div>
        <div id="info"></div>
    </body>
</html>

当然我已经使用了这个家伙的回答问题，这对我帮助很大！ :) google maps drag and drop objects into google maps from outside the Map

一组自定义图标拖放谷歌地图

1 个答案: