Google Maps API v3 Геокодирование - PullRequest
Новая
       33

Google Maps API v3 Геокодирование

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

Ваша помощь будет высоко оценена следующим.Я использую код JS ниже, чтобы отобразить карту Google с изменяемым наложением круга для вывода координаты центральной точки, радиуса и ограничительной рамки: 

function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
draggable: true,
title: 'Drag to set centre',
icon: 'images/mapicon3.png'
});
marker.bindTo('map', this);
marker.bindTo('position', this);
var radiusWidget = new RadiusWidget();
radiusWidget.bindTo('map', this);
radiusWidget.bindTo('center', this, 'position');
this.bindTo('distance', radiusWidget);
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
function RadiusWidget() {
var circle = new google.maps.Circle({
fillColor: '#efefef',
fillOpacity: 0.5,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 2
});
this.set('distance', 5);
this.bindTo('bounds', circle);
circle.bindTo('center', this);
circle.bindTo('map', this);
circle.bindTo('radius', this);
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
RadiusWidget.prototype.addSizer_ = function() {
var sizer = new google.maps.Marker({
draggable: true,
title: 'Drag to expand search area',
icon: 'images/mapicon2.png'
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function() {
me.setDistance();
});
};
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
if (bounds) {
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371;
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
RadiusWidget.prototype.setDistance = function() {
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = this.distanceBetweenPoints_(center, pos);
var distance = Math.round(distance*100)/100
this.set('distance', distance);
};
function init() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()), zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var distanceWidget = new DistanceWidget(map);
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
displayInfo(distanceWidget);
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
displayInfo(distanceWidget);
});
mapDiv.style.width = (viewportwidth)+"px";
mapDiv.style.height = (viewportheight)+"px";
}
function displayInfo(widget) {
var info = document.getElementById('info');
info.innerHTML = '<form action="/search" method="post"><input type="hidden" name="position" value="' + widget.get('position') + '" /><input type="hidden" name="distance" value="' + widget.get('distance') + '" /><input type="hidden" name="bounds" value="' + widget.get('bounds') + '" /><input type="submit" value="Submit" /></form>';
}
google.maps.event.addDomListener(window, 'load', init);

Это прекрасно работает, но я могуне могу понять, как добавить к этому геокодирование, чтобы название места можно было вводить (отправлять через форму), геокодировать с помощью API Карт Google и устанавливать в качестве центральной точки в приведенном выше сценарии, не нарушая текущей функциональности.

По запросу есть jsFiddle для вышеуказанного здесь .Вы увидите, что пользователь может перетащить маркеры в положение вывода, расстояние и границы;однако я хочу добавить возможность ввода местоположения в форме, которое при отправке геокодируется, а полученные координаты используются для изменения положения центрального маркера.

Любая помощь очень ценится, спасибо.

Ответы [ 3 ]

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

Вот демоверсия JSFiddle: и введите почтовый индекс (30084), чтобы проверить его:

Вот начальная разметка HTML: 

    <div id="map-canvas"></div>
    <div id="info">
    </div>
    <div id='geocode'>
         <input name="q" type="text" id="q" /><br />
         <input type="submit" value="Submit" id="geosubmit" />
    </div>

Вот как вы можете получить информацию о геокоде на основе входных данных, и с помощью функции обратного вызова вашего геокода вы можете установить центр своего виджета DistanceWidget.ResponseResult даст вам широту, позвонив responses[0].geometry.location.lat() и lng на responses[0].geometry.location.lng(): 

function init() {
    var mapDiv = document.getElementById('map-canvas');
    var geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(51.5001524, -0.1262362),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var distanceWidget = new DistanceWidget(map);

    //Geocoder input section and logic
    var mySubmit = document.getElementById('geosubmit');
    var myGeoInfo = document.getElementById('q');
    mySubmit.onclick = function() {
        geocoder.geocode({
            address: myGeoInfo.value
        }, function(responses) {
            if (responses && responses.length > 0) {
                var newMarkerPos = new google.maps.LatLng(responses[0].geometry.location.lat(), responses[0].geometry.location.lng());
                distanceWidget.set('position', newMarkerPos); //sets the new position of marker
                distanceWidget.map.setCenter(newMarkerPos); //sets map's center
            } else {
                //response failed output error message
                alert('error getting geocode');
            }
        });
    }

    google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
        displayInfo(distanceWidget);
    });
    google.maps.event.addListener(distanceWidget, 'position_changed', function() {
        displayInfo(distanceWidget);
    });

    mapDiv.style.width = "500px";
    mapDiv.style.height = "300px";
}

Update.Пожалуйста, проверьте демонстрацию JSFiddle и введите почтовый индекс (30084), чтобы проверить его:

Чтобы установить свой текущий RadiusWidget и маркер карты Google, вот модифицированный код.Вам не нужно изменять прототип вашего текущего виджета, чтобы усложнить ситуацию.Вы можете просто вызвать опцию set MVCObject и получить доступ к карте с помощью экземпляра distancewidget: 

geocoder.geocode({
    address: myGeoInfo.value
}, function(responses) {
    if (responses && responses.length > 0) {
        var newMarkerPos = new google.maps.LatLng(responses[0].geometry.location.lat(), responses[0].geometry.location.lng());
        distanceWidget.set('position', newMarkerPos); //sets the new position of marker
        distanceWidget.map.setCenter(newMarkerPos); //sets map's center
    } else {
        //response failed output error message
        alert('error getting geocode');
    }
});
1 голос
/ 20 марта 2011

Если вы измените маркер в DistanceWidget на переменную экземпляра и создадите метод setPosition (), работающий с этим маркером, я думаю, вы сможете делать то, что хотите; 

function DistanceWidget(map) {
    this.set('map', map);
    this.set('position', map.getCenter());

    this.marker = new google.maps.Marker({
        draggable: true,
        title: 'Drag to set centre',
        icon: 'images/mapicon3.png'
    });
    this.marker.bindTo('map', this);
    this.marker.bindTo('position', this);

    var radiusWidget = new RadiusWidget();
    radiusWidget.bindTo('map', this);
    radiusWidget.bindTo('center', this, 'position');
    this.bindTo('distance', radiusWidget);
    this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/* Add the `setMarkerPosition` method to this class */
DistanceWidget.prototype.setMarkerPosition = function(position) {
    this.marker.setPosition(position);
}

И ваша init () - функция становится; 

function init() {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()), zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var distanceWidget = new DistanceWidget(map);

    /* Set up geo-functionality */
    var geo = new google.maps.Geocoder();
    geo.geocode({address: 'Piccadilly Circus, London'}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            distanceWidget.setMarkerPosition(results[0].geometry.location);
            map.setCenter(results[0].geometry.location);
        }
    });
    ...

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Это только из головы, не проверено, плюс я никогда не работал с этими классами.

0 голосов
/ 08 июля 2011

Здесь есть учебник , который показывает, как получить геокодирование и обратное геокодирование, работая с Google Maps v3 и Jquery

...