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

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

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

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

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

希望有所帮助。

只允许添加一个标记

1 个答案: