我正在使用谷歌地图开发一个应用程序,允许用户在地图上添加标记。我想要实现的是只允许他们一次添加一个标记,并阻止他们添加另一个标记,直到将前一个标记的详细信息保存到数据库中。
我目前在某种程度上有所作为。它允许用户添加标记。一旦添加,他们不能添加另一个。
他们可以将他们在地图周围添加的标记拖动到所需位置,并可以使用表单将详细信息保存到数据库中。我想要实现的是在提交表单时能够添加另一个标记。
这是我添加标记的代码。它与将表单的代码添加到数据库
的代码完美地协同工作 //adds a listener that registers when the window has loaded
google.maps.event.addDomListener(window, "load", function(){
//hides the form for adding a service until the map is clicked
$("#add_marker").hide();
// adds a listener to the map that registers a click event
google.maps.event.addListener(map, "click", function(event) {
$("#add_marker").show(); // Shows the form for adding a service after the map is clicked
//assigns the clicked position on the map to the variables var lat and var lng
var lat = event.latLng.lat();
var lng = event.latLng.lng();
myCoordsLength = 6;
//alert("Lat=" + lat + "; Lng=" + lng);
});
// populate the textfield inputs with lat, lng coordinates
/*eventlistener for the map that registers a click event that gets the longitude and latitude of the event and adds a marker to the map at that position */
google.maps.event.addListener(map, 'click', function(event) {
document.getElementById('input_lat').value = event.latLng.lat().toFixed(myCoordsLength);
document.getElementById('input_long').value = event.latLng.lng().toFixed(myCoordsLength);
placeMarker(event.latLng);
});
var marker;
//Configure the marker
function placeMarker(location) { // open function
if ( marker )
{
marker.setPosition(location);
}
else
marker = new google.maps.Marker({
position: location,
map: map,
draggable:true, // makes the marker dragable
animation: google.maps.Animation.DROP, //adds an animation to the marker hen it first appears
title:'new marker'
});
// add a listener for the "dragend" event
google.maps.event.addListener(marker, 'dragend', function() {
// Get the Current position, where the marker was dropped
var point = marker.getPosition();
// centers the map on markers coords
//map.setCenter(marker.position);
// Update the hidden form text boxes for latitude and longitude of the marker
document.getElementById('input_lat').value = point.lat().toFixed(myCoordsLength);
document.getElementById('input_long').value = point.lng().toFixed(myCoordsLength);
});
} // close function
})
我使用if(marker)
语句或addListenerOnce
来阻止在添加第一个标记后添加另一个标记但我不确定如何在提交表单后再对其进行抵消允许用户添加另一个标记。
我最后用过这个。它允许用户只添加一个标记并在click事件上围绕地图移动它。它允许用户使用此标记将多个位置存储到数据库中。它不是一个完美的解决方案,但也可以满足我的需求。
var marker;
function placeMarker(location) {
if ( marker )
{
marker.setPosition(location);
}
else
marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
animation: google.maps.Animation.DROP,
title:'new marker'
});