Я пытаюсь создать карту, которая позволяет пользователям сообщать о следах
проблема при нажатии и заполнении формы в информационном окне (аналогично
seeclickfix.com). Я не встроил PHP / SQL, который будет на самом деле
сохранить информацию, предоставленную пользователем еще.
Проблема: у меня есть кнопка в HTML моего информационного окна для пользователей, чтобы
отправить информацию и закрыть окно. Вместо того, чтобы просто закрыть
хотя окно, мой слушатель событий для новых маркеров получает клики
через информационное окно, создавая нежелательный маркер за кнопкой.
Google как-то избегает этой проблемы; не клик зарегистрирован на их
верхний правый выход «х».
Я попытался создать логическую переменную сигнала ('infopen'), чтобы
моя функция addMarker знает, открыто ли информационное окно, но это не так
функционирует .... Есть идеи почему?
Будем благодарны за любые другие предложения относительно кода!
(Моя задача - создать систему для организации и хранения нескольких
infowindows / маркеры ...)
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Reporter </title>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var markers = [];
var infowindow;
var infopen = false;
var edit = true;
var pos = new google.maps.LatLng(44.021, -71.831102);
function initialize() {
var mapOptions = {
zoom: 14,
center: pos,
mapTypeControl: true,
panControl: false,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var table = "<table>" +
"<tr><td>Problem:</td> <td><input type='text'
id='prob'/> </td> </tr>" +
"<tr><td>Description:</td> <td><input type='text'
size='30' id='desc'/></td> </tr>" +
"<tr><td align=right ><input type='button'
value='Save & Close' onclick='saveData()' /></td>" +
"<td><input type='button' value='Cancel & Delete'
onclick='cancel()' /></td></tr>";
infowindow = new google.maps.InfoWindow({
content: table
});
google.maps.event.addListener(map, "click", function(event) {
addMarker(event.latLng);
});
} //end initialize
// Add a marker to the map and push to the array, open an infowindow listener.
function addMarker(location) {
if (editon.editT[0].checked) edit = true; //check 'edit' radio buttons
if (editon.editT[1].checked) edit = false;
alert('infopen is ' + infopen);
if (edit== true && infopen== false) {
//if edit toggle is selected and infowindow not open
marker = new google.maps.Marker({
position: location, //from event.latLng
map: map,
draggable: true,
});
markers.push(marker); //add to markers array
google.maps.event.addListener(marker, "click", function() {
//listener for infowindow
infowindow.open(map, marker);
infopen = true; // stop the creation of new markers *in theory...
//alert('infopen is ' + infopen);
});
}// end if
} //end addMarker()
// Sets the map on all markers in the array. (only used when clearing)
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Deletes all markers in the array by removing references to
them.
function deleteOverlays() {
setAllMap(null);
markers = [];
}
//would passes along info to php... not yet
function saveData() {
infowindow.close();
infopen = false; //reallow marker creation from click
}
//closes window and clears marker
function cancel() {
infowindow.close();
infopen = false; // reallow marker creation ***click still
heard by event listener***
marker.setMap(null); //just clears from map
}
</script>
</head>
<body onload="initialize()">
<br> </br>
<form name="editon"> Turn on editing:
<input type="radio" name="editT" value='true' checked/>Yes
<input type="radio" name="editT" value='false' />No
</form>
<div id="map_canvas" style="width:100%; height:70%"></div>
<p>If too cluttered:
<input onclick="deleteOverlays();" type=button value="Clear Map"/>
</body>
</html>