Перетаскиваемые маркеры карты Google - PullRequest
Новая
       19

Перетаскиваемые маркеры карты Google

2 голосов
/ 12 марта 2011

Я работал с картами Google, и теперь у меня есть требование сделать перетаскиваемый маркер, который я могу разместить на карте.

Это большая разница в сложности по сравнению с размещением маркеров по координатам геолокации?Как лучше всего создавать перетаскиваемые маркеры, которые могут устанавливать пользователи?

Спасибо, Алекс

Ответы [ 2 ]

4 голосов
/ 12 марта 2011

Вы не упоминаете, какую версию API вы используете, поэтому я придумаю v3 ... Существует свойство перетаскивания, которое вы можете установить в конструкторе, используя параметр options 'draggable: true' или вызвав setDraggable(true) функция после ее создания.

Проверьте http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker для получения дополнительной информации.

Редактировать: Для версии 2 есть функции enableDragging () и disableDragging () ...

Что касается добавления маркеров, возможно, подпишитесь на событие щелчка мыши на карте, а затем добавьте туда маркер.Координаты передаются в функцию обработки событий как часть параметра события.

0 голосов
/ 01 октября 2015 

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