Интересно, сможет ли кто-нибудь мне помочь, пожалуйста.
У меня есть следующий код JS, который позволяет пользователю добавлять один или несколько маркеров на карту.
(function add() {
var map, geocoder;
window.onload = function() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
})();
Это часть формы, которая позволяет пользователю добавлять более подробную информацию о маркере или маркерах, которые они создали, и сокращенную версию HTML-кода для этого выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add</title>
<link rel="stylesheet" href="css/addfindsstyle.css" type="text/css" media="all" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="js/addfinds.js"></script>
</head>
<body>
<form name="add" id="add">
<div>
<label for="address">
<p> </p>
<p align="left">
<label>
<div align="center">Location Name<br />
<input name="locationname" type="text" id="locationname" />
</div>
</label>
</p>
<label>Description
<input name="description" type="text" id="description" />
<input type="submit" name="Submit" value="Submit" />
</label>
</div>
</form>
<div id="map"></div>
</body>
</html>
Может кто-нибудь сказать мне, пожалуйста, как я могу скрыть поля (в этом примере - поле 'описание') и кнопку "Отправить", пока не будет создан маркер на карте, а затем, когда нажата кнопка "Отправить" поля и кнопка скрыты до следующего маркера.
Большое спасибо
Chris
ОБНОВЛЕНИЕ
Привет, большое спасибо за код.
Должно быть, я невероятно глуп, но я добавил предложенный вами код, но, похоже, он не работает.
Я изменил строку Javascript на:
google.maps.event.addListener(map, 'click', function(event) {
$("#add").show(); $("#add").submit(function(event){$(this).hide(); return false;});
placeMarker(event.latLng);
и CSS для:
body {
font-family: Calibri;
font-size: 14px;
width: auto;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
text-align: center;
border-top-color: #FFFFFF;
outline-style: none;
right: auto;
position: absolute;
left: auto;
top: auto;
bottom: auto;
visibility: visible;
}
form {
#add display: none;
margin-bottom: 10px;
clear: both;
font-size: 14px;
visibility: visible;
}
#map {
width: 795px;
height: 503px;
border: 1px solid black;
position: absolute;
left: 12px;
top: 215px;
visibility: visible;
}
Не могли бы вы сказать мне, где я ошибся, пожалуйста?
Большое спасибо
Chris