Question

我有一个按钮，点击它可以识别用户的当前位置。问题是，如果他们再次点击按钮，因为他们的设备对他们的位置变得更加精确，则会向地图添加另一个标记。他们点击的次数越多，创建的标记就越多。

如果再次单击“定位当前位置”按钮，如何删除/更新/刷新标记的第一个实例？

这是我的定位功能：

function findCurrentPosition() {   
            // start the geolocation API
            if (navigator.geolocation) {
                // when geolocation is available on your device, run this function
                navigator.geolocation.getCurrentPosition(foundYou, notFound);
            } else {
                // when no geolocation is available, alert this message
                alert('Geolocation not supported or not enabled.');
            }
        }

        function foundYou(position) {
            // convert the position returned by the geolocation API to a google coordinate object
            var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            // then try to reverse geocode the location to return a human-readable address
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    // if the geolocation was recognized and an address was found
                    if (results[0]) {
                        // add a marker to the map on the geolocated point
                        marker = new google.maps.Marker({
                            position: latlng,                   
                            map: map
                        });
                        // compose a string with the address parts
                        var address = results[0].address_components[1].long_name + ' ' + results[0].address_components[0].long_name + ', ' + results[0].address_components[3].long_name
                        // set the located address to the link, show the link and add a click event handler

                            // onclick, set the geocoded address to the start-point formfield
                            $('#from').text(address);
                            $('#from').val(address);
                            // call the calcRoute function to start calculating the route        
                    }
                } else {
                    // if the address couldn't be determined, alert and error with the status message
                    alert("Geocoder failed due to: " + status);
                }
            });
        }

由于

Answer 1

以下代码导致每次调用foundYou方法时都会创建新标记的问题。

marker = new google.maps.Marker({
                                position: latlng,                   
                                map: map
                            });

而是在marker方法之外声明foundYou变量，如

marker = new google.maps.Marker({   
                                map: map
                            });

然后使用setPosition(latLng)方法更新 marker's位置。

marker.setPosition(latlng);  // this will update the position of the marker

Answer 2

您可以简单地记住当前状态以再次禁用地理编码，因为当他们第二次立即点击按钮时他们不会改变他们的位置：

// should evaluate to true if geocoder is busy
// be sure it is set before  findCurrentPosition() call
isBusy=false;

function findCurrentPosition() {   
            // start the geolocation API if its not busy
            if(!isBusy){
                if (navigator.geolocation) {
                    //now youre geocoder will be busy
                    isBusy = true;

                    // when geolocation is available on your device, run this function
                    navigator.geolocation.getCurrentPosition(foundYou, notFound);
                } else {
                    // when no geolocation is available, alert this message
                    alert('Geolocation not supported or not enabled.');
                }                
            }else {
                console.log("already finding");
            }

        }

        function foundYou(position) {
            // convert the position returned by the geolocation API to a google coordinate object
            var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            // then try to reverse geocode the location to return a human-readable address
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    // if the geolocation was recognized and an address was found
                    if (results[0]) {
                        // add a marker to the map on the geolocated point
                        marker = new google.maps.Marker({
                            position: latlng,                   
                            map: map
                        });
                        // compose a string with the address parts
                        var address = results[0].address_components[1].long_name + ' ' + results[0].address_components[0].long_name + ', ' + results[0].address_components[3].long_name
                        // set the located address to the link, show the link and add a click event handler

                            // onclick, set the geocoded address to the start-point formfield
                            $('#from').text(address);
                            $('#from').val(address);
                            // call the calcRoute function to start calculating the route        
                    }
                } else {
                    // if the address couldn't be determined, alert and error with the status message
                    alert("Geocoder failed due to: " + status);
                }
                // Now the geoCoder finished doing what it should
                isBusy = false;

            });
        }

Answer 3

我会使用如下所示的removeMarkers（）方法：

function findCurrentPosition() {   
        // start the geolocation API
        if (navigator.geolocation) {
            // when geolocation is available on your device, run this function
            navigator.geolocation.getCurrentPosition(foundYou, notFound);
        } else {
            // when no geolocation is available, alert this message
            alert('Geolocation not supported or not enabled.');
        }
    }

    function foundYou(position) {
        // convert the position returned by the geolocation API to a google coordinate object
        var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // then try to reverse geocode the location to return a human-readable address
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // if the geolocation was recognized and an address was found
                if (results[0]) {

                    //remove markers berfore creating them.
                    map.removeMarkers();

                    // add a marker to the map on the geolocated point
                    marker = new google.maps.Marker({
                        position: latlng,                   
                        map: map
                    });
                    // compose a string with the address parts
                    var address = results[0].address_components[1].long_name + ' ' + results[0].address_components[0].long_name + ', ' + results[0].address_components[3].long_name
                    // set the located address to the link, show the link and add a click event handler

                        // onclick, set the geocoded address to the start-point formfield
                        $('#from').text(address);
                        $('#from').val(address);
                        // call the calcRoute function to start calculating the route        
                }
            } else {
                // if the address couldn't be determined, alert and error with the status message
                alert("Geocoder failed due to: " + status);
            }
        });
    }

Answer 4

您可以删除最后创建的标记。

if(marker){
   marker.setMap(null);
   marker = '';
}

在创建新标记之前插入此内容。

您应该从foundYou函数中删除标记创建。

geolocate当前位置删除以前的标记

4 个答案: