如何為Google地圖創建可拖動的自定義標記列表

Question

自從我訪問了StackOverflow非常有用的世界以來已經有一段時間了，但是我又回來了另一個問題，以幫助我嘗試做更多的事，而不是我現在能做的。

我想在自己的一個網站上放置一個google地圖，並希望在地圖的一側有一個自定義標記的列表，網站的訪問者可以將其拖到地圖上以標識各種功能-可以說，該列表具有例如商店，房屋和辦公室的自定義標記。 訪客將適當的標記拖動到地圖上該要素所在的位置。 他們可能想要拖動同一自定義標記的多個副本（例如，許多商店），因此在用戶將其拖動到地圖上之后，標記必須重新出現在列表中。 當用戶放下標記時，應該向他們顯示一個信息框，詢問用戶更多信息，然后提示他們保存該標記，以便當其他人訪問時也可以看到該功能（但不能更改）。我真的很想這樣做，以便當用戶保存標記時，它將所有信息添加到mysql數據庫中，並且還通過電子郵件向我發送來自信息框的詳細信息，包括標記的緯度。

所以這是最終目標，我知道這是一項艱巨的任務，但是如果有人能指出我作為十個人的發車人的方向，我將非常感激。

非常感謝，

搶。

Answer 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>

我希望這有幫助。

如何為Google地圖創建可拖動的自定義標記列表

問題描述

1 個解決方案

解決方案1
1 2013-03-04 23:09:51

如何為Google地圖創建可拖動的自定義標記列表

問題描述

1 個解決方案

解決方案1 1 2013-03-04 23:09:51

解決方案1
1 2013-03-04 23:09:51