Question

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

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

谢谢你，亚历克斯

Answer 1

你没有提到你正在使用哪个版本的API，所以我将认为v3 ...有一个可拖动的属性，你可以使用options参数'draggable：true'或者通过调用setDraggable在构造函数中设置（true）创建后的函数。

查看http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker了解详情。

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

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

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

可拖动的谷歌地图标记

2 个答案: