可拖动的谷歌地图标记答案

【问题标题】：Draggable google map markers可拖动的谷歌地图标记
【发布时间】：2011-03-12 01:01:35
【问题描述】：

我一直在使用谷歌地图，现在需要制作一个可以放置在地图上的可拖动标记。

这与仅通过地理位置坐标放置标记的复杂性有很大不同吗？制作用户可以设置的可拖动标记的最佳方法是什么？

谢谢你，亚历克斯

【问题讨论】：

标签： javascript google-maps draggable

【解决方案1】：

你没有提到你正在使用哪个版本的 API，所以我会假设 v3...有一个可拖动的属性，你可以在构造函数中使用选项参数 'draggable: true' 或调用 setDraggable (true) 创建后的函数。

查看http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker了解更多信息。

编辑：对于版本 2，有 enableDragging() 和 disableDragging() 函数...

至于添加标记，或许订阅地图上的鼠标点击事件，然后在其中添加标记。坐标作为事件参数的一部分传递给事件处理函数。

【讨论】：

【解决方案2】：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var geocoder = new google.maps.Geocoder();

        function geocodePosition(pos) {
            geocoder.geocode({
                latLng: pos
            }, function (responses) {
                if (responses && responses.length > 0) {
                    updateMarkerAddress(responses[0].formatted_address);
                } else {
                    updateMarkerAddress('Cannot determine address at this location.');
                }
            });
        }

        function updateMarkerStatus(str) {
            document.getElementById('markerStatus').innerHTML = str;
        }

        function updateMarkerPosition(latLng) {
            document.getElementById('info').innerHTML = [
                latLng.lat(),
                latLng.lng()
            ].join(', ');
        }

        function updateMarkerAddress(str) {
            document.getElementById('address').innerHTML = str;
        }

        function initialize() {
            var latLng = new google.maps.LatLng(9.010951935679284, 38.760017580032354);
            var map = new google.maps.Map(document.getElementById('mapCanvas'), {
                zoom: 15,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: latLng,
                title: 'Point A',
                map: map,
                draggable: true
            });

            // Update current position info.
            updateMarkerPosition(latLng);
            geocodePosition(latLng);

            // Add dragging event listeners.
            google.maps.event.addListener(marker, 'dragstart', function () {
                updateMarkerAddress('Dragging...');
            });

            google.maps.event.addListener(marker, 'drag', function () {
                updateMarkerStatus('Dragging...');
                updateMarkerPosition(marker.getPosition());
            });

            google.maps.event.addListener(marker, 'dragend', function () {
                updateMarkerStatus('Drag ended');
                geocodePosition(marker.getPosition());
            });
        }

        // Onload handler to fire off the app.
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<style type="text/css">
        #mapCanvas {
            width: 500px;
            height: 400px;
            float: left;
        }

        #infoPanel {
            float: left;
            margin-left: 10px;
        }

            #infoPanel div {
                margin-bottom: 5px;
            }
    </style>

<html>
<head>
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    </head>
<body>
    <div id="mapCanvas"></div>
    <div id="infoPanel">
        <b>Marker status:</b>
        <div id="markerStatus"><i>Click and drag the marker.</i></div>
        <b>Current position:</b>
        <div id="info"></div>
        <b>Closest matching address:</b>
        <div id="address"></div>
    </div>
</body>
</html>

【讨论】：

你能解释一下你的答案吗？