Question

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

我想在我的某个网站上放置一个谷歌地图，我希望它在地图的一侧有一个自定义标记列表，该网站的访问者可以将其拖到地图上以识别各种功能 - 例如，列表中包含商店，住宅和办公室的自定义标记。访问者将相应的标记拖动到要素所在位置的地图上。他们可能想要拖动同一个自定义标记的多个副本（例如许多商店），因此在用户将其拖动到地图后，标记必须重新出现在列表中。当用户放下标记时，应该会向他们显示一个信息框，询问用户提供更多信息，然后提示他们保存该标记，这样当其他人访问时他们也可以看到该功能（但不能更改）。我真的想这样做，以便当用户保存标记时，它将所有信息添加到mysql数据库，并通过电子邮件向我发送详细信息，包括标记的lat-long。

所以这是最终目标，我知道这是一项艰巨的任务，但如果有人能够指出我作为十人的首发方向我会非常感激。

非常感谢，

罗布。

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

我希望这会有所帮助。

如何为Google地图创建可拖动的自定义标记列表

1 个答案: