Заранее извиняюсь, если не там задаю вопрос, но я не нашел у вас раздела по Гугл Картам, а этот более подходящий. В общем у меня стоит задача сделать возможность добавления маркеров на карту гугл тремя способами: 1. Задавая адрес 2. Вводом координат 3. Перетаскиванием маркера вручную Причем все они должны работать в связке, т.е. перетаскивание вручную должно работать при любом вводе. Итак, что у меня имеется: - форма для ввода | Код |
Адрес: <input name="address" id="address" size="50" type="text" value="" onblur="if (this.value.length>0) {codeAddress(this.value);}" />
Координаты: <input name="lat" id="lat" type="text" value="" /> Широта
<input name="lng" id="lng" type="text" value="" onblur="if (this.value.length>0) {codeLatLng(this.value);}" /> Долгота
Карта: <div id="map_canvas" style="width: 100%; height: 300px"></div>
|
Т.е. при вводе адреса или ввода координат на карте должен появляться соответственный маркер. - код | Код |
var map;
var markersArray = [];
var geocoder;
// Создание карты
function initialize() {
geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Задаем слой с OSM
var openStreet = new google.maps.ImageMapType({
getTileUrl: function(ll, z) {
var X = ll.x % (1 << z); // wrap
return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 18,
name: "OSM",
alt: "Слой с Open Streetmap"
});
//Добавляем слои к карте
map.mapTypes.set('osm', openStreet);
map.setMapTypeId('osm');
map.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
'osm',
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
});
}
// Добавляем маркер
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map,
draggable:true
});
markersArray.push(marker);
}
// Очищаем оверлэй
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
// Определяем местоположение по адресу
function codeAddress() {
deleteOverlays();
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
addMarker(results[0].geometry.location);
// Определяем координаты перемещения маркера
google.maps.event.addListener(
marker,
'drag',
function() {
document.getElementById('lat').value = marker.position.lat();
document.getElementById('lng').value = marker.position.lng();
}
);
} else {
alert("Ошибка геокодера! Причина: " + status);
}
});
}
// Определяем местоположение по координатам
function codeLatLng() {
var input = document.getElementById("lat").value;
var input2 = document.getElementById("lng").value;
var lat = parseFloat(input);
var lng = parseFloat(input2);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable:true
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert("Ничего не найдено.");
}
} else {
alert("Ошибка геокодера! Причина: " + status);
}
});
}
|
1. Нужно сделать очистку старых маркеров после каждого геокодинга и создание нового. Я сделал функцию как сказано в документации, но она работает не как нужно - очищает весь слой, даже новые маркеры. 2. Хочется сделать универсальный зум, чтобы при вводе города - зум до города, при вводе улицы - до улицы. Вообщем максимальный. |
Универсальный геокодинг в Google Maps api v3 
Дата 3.3.2011, 15:04 (
Загрузка ...
