Я создаю довольно массивный веб-сайт, работающий на WP, но использующий карты Google в качестве основного интерфейса.
У меня есть страница на стороне администратора, на которой я хочу быть в тюке, чтобы выбрать местоположение с помощьюперетаскивая маркер, а затем сохраняя эти данные в MySQL (через функции Php / wp)
Проблема в том, что мои основы WP и PHP довольно прочные, а JS или Jquery довольно простые, если не сказатьшаткий.
Я «взломал» код из чтения API карт Google, учебных пособий и примеров - он правильно создает карту, а также маркер, который нужно перетащить, и затем передает значение [Lat, Lng] на вход TXT через jQuery - который затем сохраняется в БД.
Все работает нормально, за исключением одной проблемы:
- , когда я редактирую или сохраняю данные- в следующий раз, когда я открою это «сообщение» - маркера нет, и мне нужно создать новый и сохранить снова.
, когда я попытался получить значения поля ввода спростой var LatPoint = jQuery('[name=LatTxt]').val()
и
placeMarker(new google.maps.LatLng(LatPoint,LngPoint));
карте вообще не удалось сгенерировать.
Во-вторых, функция маркера перетаскивания не обновляетinput.
третье (и не менее важное) то, что я ЗНАЮ, что код ужасен, и я уверен, что есть лучший способ добиться этого - и какова цель всего сайтаЯ также должен УЗНАТЬ - я хотел бы, чтобы кто-то пересмотрел код и посоветовал, как его оптимизировать ..
это код, который у меня есть до сих пор ..
var map;
var markersArray = [];// to be used later to clear overlay array
jQuery(document).ready(function(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_2k"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
var marker;
//Function to extract longitude
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
draggable: true,
title: 'Drag me',
map: map
});
markersArray.push(marker); // to be used later to clear overlay array
}
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
//Jquery update HTML input boxes
function updatelonlat() {
jQuery('#LatTxt').val(marker.getPosition().lat());
jQuery('#LonTxt').val(marker.getPosition().lng());
}
// add event click
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
updatelonlat();
//var lat = parseFloat(document.getElementById('LatTxt').value); - somehow not working
});
//google.maps.event.addListener(marker, 'dragend', function(event) {
//document.getElementById("#LatTxt").value = event.latLng.lat(); - somehow not working
map.setCenter(location);
});
Любая помощь будет принята с благодарностью ..
РЕДАКТИРОВАТЬ I
Я установил JSFIDDLE: http://jsfiddle.net/obmerk99/fSj9F/1/
Очевидно, я не могу симулировать функцию PHP - но это не нужно.То, что я хочу, это когда страница загружается / обновляется / сохраняется - она начнется с CENTER и MARKER с значениями из поля ввода ... Кроме того - я только сейчас заметил, что действие перетаскивания также не обновляется, я не знаюесли это jsfiddle - или моя функция ...