一次只允许添加一个标记

Question

我想知道是否有人可以帮助我解决我希望的简单问题。

我使用下面的代码，允许用户在输入表单上输入地址，单击对地址进行地理编码的按钮，返回纬度/经度坐标，在地图上放置标记。如果用户随后添加另一个地址的详细信息并单击该按钮，代码会对该地址进行地理编码并在地图上放置另一个标记，换句话说，地图上现在有两个标记。

也许有人可以告诉我如何对我的代码进行更改，在用户单击“保存”按钮之前，任何时候只允许一个标记可编辑。即，如果用户输入伦敦地址，则会像以前一样进行地理编码，但是当他们将地址更改为爱丁堡时，该标记会移动到新位置，因此地图上会出现一个标记，直到他们单击“保存”按钮，该按钮将被清除我表单上的字段。

function Geocode() {

    // This is defining the global variables
    var map, geocoder, myMarker;

    window.onload = function() {

    //This is creating the map with the desired options
    var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(55.378051,-3.435973),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_LEFT
    },
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.ZOOM_PAN,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);

    // This is making the link with the 'Search For Location' HTML form
    var form = document.getElementById('SearchForLocationForm');

    // This is catching the forms submit event
    form.onsubmit = function() {

    // This is getting the Address from the HTML forms 'Address' text box
    var address = document.getElementById('Address').value;

    // This is making the Geocoder call
    getCoordinates(address);

    // This is preventing the form from doing a page submit
    return false;
    }
    }

    // This creates the function that will return the coordinates for the address
    function getCoordinates(address) {

    // This checks to see if there is already a geocoded object. If not, it creates one
    if(!geocoder) {
    geocoder = new google.maps.Geocoder();
    }

    // This is creating a GeocoderRequest object
    var geocoderRequest = {
    address: address
    }

    // This is making the Geocode request
    geocoder.geocode(geocoderRequest, function(results, status) {

    // This checks to see if the Status is 'OK 'before proceeding
    if (status == google.maps.GeocoderStatus.OK) {

    // This centres the map on the returned location
    map.setCenter(results[0].geometry.location);

    // This creates a new marker and adds it to the map
    var myMarker = new google.maps.Marker({
        position: results[0].geometry.location,
        draggable:true
    });

    //This fills out the 'Latitude' and 'Longitude' text boxes on the HTML form
    document.getElementById('Latitude').value=  results[0].geometry.location.lat();
    document.getElementById('Longitude').value=  results[0].geometry.location.lng();

    //This allows the marker to be draggable and tells the 'Latitude' and 'Longitude' text boxes on the HTML form to update with the new co-ordinates as the marker is dragged
    google.maps.event.addListener(     
    myMarker,     
    'dragend',     
    function() {         
    document.getElementById('Latitude').value = myMarker.position.lat();         
    document.getElementById('Longitude').value = myMarker.position.lng(); 

    var point = myMarker.getPosition();
    map.panTo(point);   
    } 
    ); 
    }
    } 
    )
    }
    })();

Answer 1

执行此操作的一个简单方法是将当前可编辑标记存储在全局变量中。每当用户按下“保存”时，您就可以确保用户无法再对其进行编辑。

需要记住的一件好事是，如果您将来想再次编辑任何这些标记，则需要以某种方式存储它们。数组是执行此操作的正常方法。所以，换句话说。您要做的是：

用户输入位置。地理编码返回结果。使用该位置创建一个新标记并将其存储在全局变量中。如果用户更改位置，您将更改该标记上的位置。如果用户按下“保存”，您将清除该变量。当用户想要创建新标记时，您只需将全局变量分配给标记的新实例即可。

如果您想再次访问“已保存”标记，请记住将它们保存在数组中。如果您不这样做，标记仍然存在并显示在地图上，但您无法访问它们。

希望有帮助。