0

StackOverflowの非常に役立つ世界を訪れてからしばらく経ちましたが、現在の能力を超えることを試みるのに役立つ別の質問でまた戻ってきました。

自分のサイトの1つにグーグルマップを配置したいのですが、サイトの訪問者がさまざまな機能を識別するためにマップにドラッグできるように、マップの片側にカスタムマーカーのリストを配置したいと思います-たとえば、リストにショップ、家、オフィスのカスタムマーカーがあるとします。訪問者は、フィーチャがある場所の位置にあるマップに適切なマーカーをドラッグします。同じカスタムマーカーの複数のコピー（たとえば、多くのショップ）をドラッグしたい場合があるため、ユーザーがマーカーをマップにドラッグした後、マーカーをリストに再表示する必要があります。ユーザーがマーカーをドロップすると、ユーザーに詳細情報を要求する情報ボックスが表示され、他のユーザーがアクセスしたときに機能も表示できるように（ただし変更しないように）、マーカーを保存するように求められます。

それが最終目標であり、それが大きな課題であることはわかっていますが、誰かが私を10のスターターとして何かの方向に向けることができれば、私は本当に感謝しています。

どうもありがとう、

ロブ。

4

1 に答える 1

1

カスタムのドラッグ可能なマーカーを使用したサンプル例を作成しました。

具体的には、次のマーカー タイプが含まれます。

  • パーキング
  • 情報
  • としょうかん

pointsOfInterest 配列には、[いくつかのマーカーを追加] リンクが押されたときに表示されるマーカーが含まれています。

<!doctype html>
<html lang="en">

    <head>
        <title>Google Maps</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">

        </script>
        <script type="text/javascript">
            // points of interest
            var pointsOfInterest = [
                    ['Chicago Parking', 41.850033, -87.6500523, 'parking'],
                    ['Illinois Library', 40.797177, -89.406738, 'library'],
                    ['Detroit Info', 42.302284,-83.231215, 'info']
                ],
                // map initial center position
                demoCenter = new google.maps.LatLng(42, -87),
                map;

            // initialize the map
            function initialize() {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    zoom: 7,
                    center: demoCenter,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            }

            // some standard icons for google markers
            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var icons = {
                parking: {
                    icon: iconBase + 'parking_lot_maps.png',
                    shadow: iconBase + 'parking_lot_maps.shadow.png'
                },
                library: {
                    icon: iconBase + 'library_maps.png',
                    shadow: iconBase + 'library_maps.shadow.png'
                },
                info: {
                    icon: iconBase + 'info-i_maps.png',
                    shadow: iconBase + 'info-i_maps.shadow.png'
                }
            };

            // create draggable marker and add in map
            function createMarker(feature) {
                var marker = new google.maps.Marker({
                    position: feature.position,
                    icon: icons[feature.type].icon,
                    shadow: {
                        url: icons[feature.type].shadow,
                        anchor: new google.maps.Point(16, 34)
                    },
                    draggable: true,
                    map: map
                });
                return marker;
            }

            // add the markers included inside the pointsOfInterest array
            function addMarkers() {
                var marker,
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < pointsOfInterest.length; i++) {

                    var feature = new Object();
                    // set type
                    feature.type = pointsOfInterest[i][3];
                    // set position
                    feature.position = new google.maps.LatLng(pointsOfInterest[i][1], pointsOfInterest[i][2]);
                    // create the marker
                    var marker = createMarker(feature);

                    // add a listener to do something on marker click
                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(pointsOfInterest[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }

            $(document).ready(function () {
                initialize();
            });

            $(document).on('click', '.add-markers', function (e) {
                e.preventDefault();
                addMarkers();
            });
        </script>
    </head>

    <body>
        <div id="basic-map">
            <div id="map_canvas" style="height:350px;"></div>
            <a href="#" class="add-markers">Add Some Markers</a>
        </div>
    </body>

</html>

これが役立つことを願っています。

于 2013-03-04T23:09:51.673 に答える