如何刪除/替換先前繪製的折線，以便在任何給定時間只有一個折線？

-1

理想情況下，我想要一條從最近的標記到靜態位置的線。我可以對距離進行排序，找到最接近的標記並繪製直線，但如果添加了新標記並且比先前最接近的標記更近，則會繪製新的折線，並且舊折線仍然存在。如何刪除/替換先前繪製的折線，以便在任何給定時間只有一個折線？

var sorted = pathArr.sort(function (a, b) { 
     var aValue = Math.abs(parseFloat(a['distance'])); 
     var bValue = Math.abs(parseFloat(b['distance'])); 

     if (typeof aValue && bValue == "number") { 
      return (aValue > bValue) ? 1 : ((bValue > aValue) ? -1 : 0); 
     } 

     return (aValue > bValue) ? 1 : ((bValue > aValue) ? -1 : 0); 
    }); 
    console.log(sorted); 

    pathCoordinate = [{lat: lat1, lng: lon1}, {lat: sorted[0].lat, lng: sorted[0].lng}]; 

    line = new google.maps.Polyline({ 
     path: pathCoordinate, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    line.setMap(map);

我使用

line.setMap(null);

但無濟於事

來源

2016-12-27 Vikram Arul Adityan

確保行變量是全局定義。 – CommonPlane

很難說。沒有足夠的代碼。「徒勞無功」？我們需要更多細節。你在使用活動嗎？如果行更改，它需要再次使用'.setMap（）'。非原始值也可能是一個問題。 – PHPglue

你在哪裏試過'line.setMap（null）;'？請提供一個證明你的問題的[mcve]。 – geocodezip

如果線路存在且setMap方法試過，設置其map屬性設置爲null（從地圖上刪除）然後創建一個新行。

var sorted = pathArr.sort(function(a, b) { 
    var aValue = Math.abs(parseFloat(a['distance'])); 
    var bValue = Math.abs(parseFloat(b['distance'])); 

    if (typeof aValue && bValue == "number") { 
    return (aValue > bValue) ? 1 : ((bValue > aValue) ? -1 : 0); 
    } 

    return (aValue > bValue) ? 1 : ((bValue > aValue) ? -1 : 0); 
}); 
console.log(sorted); 

pathCoordinate = [{ 
    lat: lat1, 
    lng: lon1 
}, { 
    lat: sorted[0].lat, 
    lng: sorted[0].lng 
}]; 

if (line && line.setMap) line.setMap(null); 
line = new google.maps.Polyline({ 
    path: pathCoordinate, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

line.setMap(map);

proof of concept fiddle

代碼片段：

var geocoder; 
 
var map; 
 
var pathArr = []; 
 
var lat1 = 37.4419; 
 
var lon1 = -122.1419; 
 
var line; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    /* pathArr.push({ 
 
    lat: 37.4419, 
 
    lng: -122.1419, 
 
    distance: google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(37.4419, -122.1419), map.getCenter()) 
 
    }); */ 
 
    google.maps.event.addListener(map, 'click', addPoint); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function addPoint(evt) { 
 
    pathArr.push({ 
 
    lat: evt.latLng.lat(), 
 
    lng: evt.latLng.lng(), 
 
    distance: google.maps.geometry.spherical.computeDistanceBetween(evt.latLng, map.getCenter()) 
 
    }); 
 
    var sorted = pathArr.sort(function(a, b) { 
 
    var aValue = Math.abs(parseFloat(a['distance'])); 
 
    var bValue = Math.abs(parseFloat(b['distance'])); 
 

 
    if (typeof aValue && bValue == "number") { 
 
     return (aValue > bValue) ? 1 : ((bValue > aValue) ? -1 : 0); 
 
    } 
 

 
    return (aValue > bValue) ? 1 : ((bValue > aValue) ? -1 : 0); 
 
    }); 
 
    console.log(sorted); 
 

 
    pathCoordinate = [{ 
 
    lat: lat1, 
 
    lng: lon1 
 
    }, { 
 
    lat: sorted[0].lat, 
 
    lng: sorted[0].lng 
 
    }]; 
 

 
    if (line && line.setMap) line.setMap(null); 
 
    line = new google.maps.Polyline({ 
 
    path: pathCoordinate, 
 
    geodesic: true, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2 
 
    }); 
 

 
    line.setMap(map); 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>

來源

2016-12-27 15:50:46 geocodezip

如何刪除/替換先前繪製的折線，以便在任何給定時間只有一個折線？

回答

相關問題