0

好吧，自从我访问 StackOverflow 的非常有用的世界以来已经有一段时间了，但我又回来了另一个问题，以帮助我尝试做比我目前能够做的更多的事情。

我想在我的一个网站上放一张谷歌地图，我希望它在地图的一侧有一个自定义标记列表，该网站的访问者可以将其拖到地图上以识别各种功能 -例如，假设该列表具有商店、房屋和办公室的自定义标记。访问者将适当的标记拖到地图上要素所在的位置。他们可能想要拖动同一自定义标记的多个副本（例如许多商店），因此在用户将标记拖到地图后，该标记必须重新出现在列表中。当用户放下标记时，他们应该看到一个信息框，询问用户更多信息，然后提示他们保存该标记，以便当其他人访问时他们也可以看到该功能（但不能更改它）。

所以这是最终目标，我知道这是一项艰巨的任务，但如果有人能指出我作为 10 岁首发的方向，我将不胜感激。

非常感谢，

抢。

4

1 回答 1

1

我创建了一个带有自定义可拖动标记的示例。

更具体地说，它包含以下标记类型：

  • 停車處
  • 信息
  • 图书馆

pointsOfInterest 数组包含按下 Add Some Markers 链接时显示的标记。

<!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 回答