只允許在一次添加一個標記

Question

我想知道是否有人可能請幫助我，我希望是一個簡單的修復。

我使用下面的代碼，允許用戶在輸入表單上輸入地址，單擊地址解析地址的按鈕，返回Lat/Lng座標，在地圖上放置一個標記。如果用戶添加了另一個地址的詳細信息並單擊該按鈕，代碼對該地址進行地理編碼並在地圖上放置另一個標記，換句話說，地圖上現在有兩個標記。

有人可能會告訴我如何改變我的代碼，只允許一次只有一個標記可以編輯，直到用戶點擊「保存」按鈕。即如果用戶輸入的地址是倫敦，就像之前一樣進行地理編碼，但是當他們更改地址以表示愛丁堡標記移動到新位置時，因此地圖上有一個標記，直到他們點擊保存按鈕，然後清除我的表單上的字段。

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

一個簡單的方法是將當前可編輯的標記存儲在全局變量中。每當用戶按下保存，您就會確保用戶無法再編輯它。

需要記住的一件好事是，如果您以後想再次編輯這些標記中的任何一個，則需要以某種方式存儲它們。數組是執行此操作的常用方法。所以，換句話說。你會做的是：

用戶輸入位置。地理編碼返回結果。用該位置創建一個新標記並將其存儲在全局變量中。如果用戶更改位置，則更改該標記上的位置。如果用戶按下保存，則清除該變量。當用戶想要創建新標記時，只需將全局變量分配給標記的新實例即可。

如果您想再次訪問它們，請記住將「已保存」標記保存在數組中。如果你不這樣做，標記仍然存在並顯示在地圖上，但你無法訪問它們。

希望有幫助。