1

これまでのところ、私が持っているのは、ユーザーが指定した住所に従ってバーの場所を配置する地図です。

しかし今、私はユーザーが持っているバーのタイプを説明するアイコンを関連付ける必要があります。そのため、マップの右側にアイコンのリストがあり、マップ内にマーカーがあります。

ユーザーが選択した画像をドラッグアンドドロップして、このマーカーを新しい画像に置き換える方法はありますか？

アイデアは、ドラッグされているアイコンをキャプチャし、現在のマーカーをこの新しいマーカーに置き換えて、その情報をデータベースに保存することです。私は最後の部分を行うことができると思いますが、最初の2つの部分についてはあまり知識がありません:(

開始方法に関するガイドをいただければ幸いです:)

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>

もちろん、私はこの男の回答済みの質問を使用しましたが、これは私を大いに助けてくれました! :) Google マップ オブジェクトをマップの外から Google マップにドラッグ アンド ドロップします

于 2012-11-19T14:29:27.683 に答える