将标记添加到地图并阻止添加另一个标记,直到将前一个标记保存到数据库

时间:2014-04-21 22:13:32

标签: javascript google-maps google-maps-api-3

我正在使用谷歌地图开发一个应用程序,允许用户在地图上添加标记。我想要实现的是只允许他们一次添加一个标记,并阻止他们添加另一个标记,直到将前一个标记的详细信息保存到数据库中。

我目前在某种程度上有所作为。它允许用户添加标记。一旦添加,他们不能添加另一个。

他们可以将他们在地图周围添加的标记拖动到所需位置,并可以使用表单将详细信息保存到数据库中。我想要实现的是在提交表单时能够添加另一个标记。

这是我添加标记的代码。它与将表单的代码添加到数据库

的代码完美地协同工作
    //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'
    });

0 个答案:

没有答案