Сегодня я пытаюсь создать локатор магазина, используя API Google Maps.
Локатор магазина должен быть настроен так:
две области, одна с картой, содержащей все магазины в данной области (измеренной в выбираемом радиусе от центральной точки), и одна область со списком всех магазинов на карте, их информацией и, конечно же, ссылкой на их сайт. Когда человек нажимает на название магазина в списке магазинов, он центрируется на магазине на карте и открывает информационное окно над маркером магазина.
У меня есть переменная javascript, которой я старался присвоить некоторые данные json из сценария php (который выбирает эти данные на лету из базы данных)
locations = [{"siteurl":"http:\/\/localhost.localdomain\/5","address":"260 Test St","city":"Brooklyn","state":"New York","zip_code":"11206"},{"siteurl":"http:\/\/localhost.localdomain\/4","address":"3709 Testing St.","city":"Austin","state":"Texas","zip_code":"78705"}];
Теперь я знаю, что мне нужно запустить 5 различных функций, перечисленных ниже с их очевидным использованием:
geocoder.getLocations: используется для
преобразовать адресные данные (из JSON
объект) в широту и долготу
объект данных addElementToList:
Используется для добавления информации об адресе в
список магазинов, и связать
centerOnStore функция для нажатия centerOnStore при щелчке элемента списка магазина в области списка этот функциональный центр располагается в магазине, который был выбран в области карты. Эта функция также открывает информационное окно над центром в хранилище. placeMarker функция для размещения маркера на карте, вызываемая, когда геокодер возвращает объекты latitudeLongitude eventListener это связано каким-то образом при нажатии на элемент списка, и это дополнительно центрирует карту в соответствующем магазине
Ну, я бы вышел из своей лиги. Я только сейчас узнаю о закрытиях JavaScript, и я думаю, что они могут быть необходимы, но я не совсем понимаю их. Мне нужно найти какой-то способ привести все эти функции в рабочее состояние, передавая информацию друг другу и обратно, и создать локатор магазина
.
Вот что у меня есть, но с этим что-то очень не так.
var map = null;
var geocoder = null;
var locations = null;
var center_on = null;
var zoom_level = null;
var markerList = [];
function initialize()
{
if(GBrowserIsCompatible())
{
// Assign vars
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
locations = <?php echo(json_encode($my_vars['locations'])); ?>;
center_on = "<?php echo($my_vars['center_on']); ?>";
zoom_level = <?php echo($my_vars['zoom_level']); ?>;
var currentLocation = 0;
geocoder.getLatLng(center_on, function(myPoint)
{
map.setCenter(myPoint, zoom_level);
});
map.setUIToDefault();
var list = document.getElementById('center_list');
for(var i = 0; i < locations.length; i++)
{
var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
geocoder.getLocations(address, addAddressToMap);
}
}
function addAddressToMap(response) {
if (!response || response.Status.code != 200) {
currentLocation++;
} else {
var place = response.Placemark[0];
var point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
GEvent.addListener(marker, 'click', function(){
this.openInfoWindowHtml("<strong>" + place.address + "</strong><br /><a href='" + locations[currentLocation]['siteurl'] + "'>" + locations[currentLocation]['siteurl'] + "</a>");
});
map.setCenter(point, 13);
markerList.push(marker);
map.addOverlay(marker);
li = document.createElement('li');
li.innerHTML = "<strong>" + place.address + "</strong>";
li.setAttribute('onclick', 'center_on_center(' + place.Point.coordinates[1] + ',' + place.Point.coordinates[0] + ')');
li.setAttribute('id', 'center_');
li.style.fontSize = '1.4em';
document.getElementById('center_list').appendChild(li);
// alert(currentLocation) here says 0,0,0,0
currentLocation++;
// alert(currentLocation) here says 1,2,3,4
}
}
}
Прошу прощения за стену кода. Я не могу больше думать. Я понятия не имел, что это будет так сложно. Понятия не имею.
если я предупреждаю currentLocation в строке перед тем, как увеличивать ее, это всегда 0. Но если я предупреждаю ее в строке после того, как увеличиваю ее, это '1,2,3,4' и т. Д. Это идет вразрез со всем, что я знаю о компьютерах.