1

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

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

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

这个想法是捕获正在拖动的图标，将当前标记替换为这个新标记，并将信息存储到我的数据库中。我想我可以做最后一部分，但我对前两部分知之甚少:(

任何有关如何开始的指南将不胜感激:)

4

1 回答 1

4 
<!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>

当然，我使用了这个人回答的问题，这对我有很大帮助！:) 谷歌地图将对象从地图外部拖放到谷歌地图中

于 2012-11-19T14:29:27.683 回答