Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Создание метки на карте с получением координат

Автор: kinder999 9.2.2012, 10:00

Доброго времени суток!
Возникла следующая задача:
Отобразить на сайте карту. По щелчке на карте в этом месте ставится метка и в два input поля передаются данные о координате (долгота и широта) установленной метки. Метка может быть только одна. Т.е., если пользователь установил метку в одном месте, а потом пробует установить в другом, то метка переносится в новое место. Так же пользователь может перетащить метку в другое место.
Возможно использовать карты google, yandex или bing. Желательна реализация на всех трёх картах.

В данный момент работает только установка только одной метки на картах google

Код


$(document).ready(function () {
    initialize();
});

    function initialize() {
    //(долгота, широта)
    var coordinate = new google.maps.LatLng(37.609218,55.753559);
    
    var mapOptions = {
        zoom: 10,//масштаб
        center: coordinate,//позиционируем карту на заданые координаты
        mapTypeId: google.maps.MapTypeId.TERRAIN//задаем тип карты
    };    
    
    //инициализация карты
    map = new google.maps.Map(document.getElementById("maps"), mapOptions);
    
    // Marker
    var marker;    

    google.maps.event.addListener(map, 'click', function(event) {        
        placeMarker(event.latLng);
    });
    
    // Marker function
    function placeMarker(location) {
        if ( marker ) {
            marker.setPosition(location);
        } else {
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
        }
        
        document.getElementById('Lat').value = location.lat();
        document.getElementById('Long').value = location.lng();
        
    }
}

или yandex

Код


YMaps.jQuery(function () {
    // Создание экземпляра карты и его привязка к созданному контейнеру
    var map = new YMaps.Map(YMaps.jQuery("#maps")[0]);   

    // Установка для карты ее центра и масштаба
    map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 7);

    // Create new placemark
    var placeMark;

    // Enable scroll zoom
    map.enableScrollZoom();

    YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
        // Get current geopoint
        var geoPoint = mEvent.getGeoPoint();
        
        if(placeMark){
            placeMark.setGeoPoint(geoPoint);
        }
        else{
            placeMark = new YMaps.Placemark(
                geoPoint, {
                    hasBalloon: false
                }
                );
            
            // Add plcaemark on map
            map.addOverlay(placeMark);          
            
        }
           
        // Set data to input
        document.getElementById('Lat').value = geoPoint.getLat();
        document.getElementById('Long').value = geoPoint.getLng();
           
    });

});

Для переноса маркера надо указать в конструкторе свойство разрешения переноса, это работает. Маркер переносится. Но не совсем понятно, где указывать привязку к событию.

Подскажите пожалуйста, как реализовать занос данных в input поля при перетаскивание маркера.

Автор: kinder999 10.2.2012, 12:15

Вопрос решён. Тему можно закрывать.

P.S. Вопрос с yandex maps был решён быстрее. У яндекса мне понравилось документация. Она более структурированная и больше примеров.