blocks|key|112852|text|根据传单API文档，要删除控件，我们可以调用基类L.Control+http://leafletjs.com/reference-1.2.0.html#control中可用的方法“删除”。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|112853|另一个选项是使用L.map类http://leafletjs.com/reference-1.2.0.html中可用的“http://leafletjs.com/reference-1.2.0.html”方法。|112854|为了说明这一点，我准备了一个小助手脚本，以更面向对象的方式管理地图。您可以调用addRoutingControl和removeRoutingControl来添加并从映射中完全删除控件。|112855|在本例中，我使用了传单映射对象中的"removeControl“方法。|112856|MapHelper+=+(function+($)+{
++++'use+strict';

++++var+settings+=+{
++++++++center:+[0,+0],
++++++++zoom:+null,
++++};

++++var+mapId+=+'';
++++var+map+=+null;
++++var+baseMaps+=+{};
++++var+overlayMaps+=+{};
++++var+routingControl+=+null;


++++var+init+=+function+(mapLayerId,+options)+{
++++++++settings+=+$.extend(settings,+options);
++++++++mapId+=+mapLayerId;
++++++++initMap();
++++};

++++var+getMap+=+function+()+{
++++++++return+map;
++++};

++++var+addRoutingControl+=+function+(waypoints)+{+
++++++++if+(routingControl+!=+null)
++++++++++++removeRoutingControl();

++++++++routingControl+=+L.Routing.control({
++++++++++++waypoints:+waypoints
++++++++}).addTo(map);
++++};

++++var+removeRoutingControl+=+function+()+{
++++++++if+(routingControl+!=+null)+{
++++++++++++map.removeControl(routingControl);
++++++++++++routingControl+=+null;
++++++++}
++++};

++++var+panMap+=+function+(lat,+lng)+{
++++++++map.panTo(new+L.LatLng(lat,+lng));
++++}

++++var+centerMap+=+function+(e)+{
++++++++panMap(e.latlng.lat,+e.latlng.lng);
++++}

++++var+zoomIn+=+function+(e)+{
++++++++map.zoomIn();
++++}

++++var+zoomOut+=+function+(e)+{
++++++++map.zoomOut();
++++}

++++var+initMap+=+function+()+{
++++++++var+$this+=+this;

++++++++map+=+L.map(mapId,+{
++++++++++++center:+settings.center,
++++++++++++zoom:+settings.zoom,
++++++++++++crs:+L.CRS.EPSG3857,
++++++++++++attributionControl:+true,
++++++++++++contextmenu:+true,
++++++++++++contextmenuWidth:+140
++++++++});

++++++++baseMaps["OSM"]+=+L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',+{
++++++++++++attribution:+'&copy;+<a+href="http://osm.org/copyright"+target="_blank">OpenStreetMap</a>+contributors'
++++++++}).addTo(map);
++++};

++++var+invalidateMapSize+=+function+()+{
++++++++map.invalidateSize();
++++}

++++return+{
++++++++init:+init,+addRoutingControl:+addRoutingControl,+removeRoutingControl:+removeRoutingControl,+
++++++++panMap:+panMap,+invalidateMapSize:+invalidateMapSize,+getMap:+getMap
++++}
}(jQuery));|code-block|syntax|javascript|112857|然后，您可以在页面中这样使用它：|112858|<button+id="addRoute">Add+Route</button>
<button+id="remoteRoute">Remove+Route</button>
<div+id="map"+style="width:+400px;+height:+400px;"></div>
<script>
++++MapHelper.init('map',+{
++++++++zoom:+10,
++++++++center:+L.latLng(51.509865,+-0.118092),
++++});

++++$('#addRoute').on('click',+function()+{
++++++++MapHelper.addRoutingControl(+[
++++++++++++L.latLng(50.509865,+-1.118092),
++++++++++++L.latLng(51.509865,+-0.118092)
++++++++]);
++++});

++++$('#remoteRoute').on('click',+function()+{
++++++++MapHelper.removeRoutingControl();
++++});
</script>|112859|可以在这里测试：https://codepen.io/anon/pen/GMXWMm|112860|我们可以期望传单能够正确地管理这一点，实际上，如果您使用浏览器调试页面，则可以看到该控件已从DOM树中完全删除。|112861|entityMap|0|LINK|mutability|MUTABLE|url|http://leafletjs.com/reference-1.2.0.html#control|1|http://leafletjs.com/reference-1.2.0.html|2|3|https://codepen.io/anon/pen/GMXWMm^0|Y|1D|0|0|E|15|1|1O|15|2|0|0|0|0|0|0|8|Y|3|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|D|3|E|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]|$A|1H|B|1I|1|1J]]|C|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1M|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1N|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1O|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1P|8|@]|9|@$A|1Q|B|1R|1|1S]]|C|$]]|$1|U|3|V|5|6|7|1T|8|@]|9|@]|C|$]]|$1|W|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]|16|$5|Z|10|11|C|$12|15]]|17|$5|Z|10|11|C|$12|18]]]]

<p>According the Leaflet API documentation, to remove a control  we can call the method "remove" available in the base class L.Control <a href="http://leafletjs.com/reference-1.2.0.html#control" rel="noreferrer">http://leafletjs.com/reference-1.2.0.html#control</a> </p>

<p>Another option is to use the "removeControl" method available in the L.map class <a href="http://leafletjs.com/reference-1.2.0.html" rel="noreferrer">http://leafletjs.com/reference-1.2.0.html</a></p>

<p>To illustrate this, I prepared a little helper script to manage the map in a more object oriented way. You can call addRoutingControl and removeRoutingControl to add and completely remove the control from the map.</p>

<p>In this example I used the "removeControl" method from the Leaflet map object.</p>

<pre><code>MapHelper = (function ($) {
    'use strict';

    var settings = {
        center: [0, 0],
        zoom: null,
    };

    var mapId = '';
    var map = null;
    var baseMaps = {};
    var overlayMaps = {};
    var routingControl = null;


    var init = function (mapLayerId, options) {
        settings = $.extend(settings, options);
        mapId = mapLayerId;
        initMap();
    };

    var getMap = function () {
        return map;
    };

    var addRoutingControl = function (waypoints) { 
        if (routingControl != null)
            removeRoutingControl();

        routingControl = L.Routing.control({
            waypoints: waypoints
        }).addTo(map);
    };

    var removeRoutingControl = function () {
        if (routingControl != null) {
            map.removeControl(routingControl);
            routingControl = null;
        }
    };

    var panMap = function (lat, lng) {
        map.panTo(new L.LatLng(lat, lng));
    }

    var centerMap = function (e) {
        panMap(e.latlng.lat, e.latlng.lng);
    }

    var zoomIn = function (e) {
        map.zoomIn();
    }

    var zoomOut = function (e) {
        map.zoomOut();
    }

    var initMap = function () {
        var $this = this;

        map = L.map(mapId, {
            center: settings.center,
            zoom: settings.zoom,
            crs: L.CRS.EPSG3857,
            attributionControl: true,
            contextmenu: true,
            contextmenuWidth: 140
        });

        baseMaps["OSM"] = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&amp;copy; &lt;a href="http://osm.org/copyright" target="_blank"&gt;OpenStreetMap&lt;/a&gt; contributors'
        }).addTo(map);
    };

    var invalidateMapSize = function () {
        map.invalidateSize();
    }

    return {
        init: init, addRoutingControl: addRoutingControl, removeRoutingControl: removeRoutingControl, 
        panMap: panMap, invalidateMapSize: invalidateMapSize, getMap: getMap
    }
}(jQuery));
</code></pre>

<p>Then you can use it in your page like this:</p>

<pre><code>&lt;button id="addRoute"&gt;Add Route&lt;/button&gt;
&lt;button id="remoteRoute"&gt;Remove Route&lt;/button&gt;
&lt;div id="map" style="width: 400px; height: 400px;"&gt;&lt;/div&gt;
&lt;script&gt;
    MapHelper.init('map', {
        zoom: 10,
        center: L.latLng(51.509865, -0.118092),
    });

    $('#addRoute').on('click', function() {
        MapHelper.addRoutingControl( [
            L.latLng(50.509865, -1.118092),
            L.latLng(51.509865, -0.118092)
        ]);
    });

    $('#remoteRoute').on('click', function() {
        MapHelper.removeRoutingControl();
    });
&lt;/script&gt;
</code></pre>

<p>Can be tested here: <a href="https://codepen.io/anon/pen/GMXWMm" rel="noreferrer">https://codepen.io/anon/pen/GMXWMm</a></p>

<p>We can expect Leaflet to manage this properly and in fact if you debug the page using your browser you can see that the control is completely removed from the DOM tree.</p>


blocks|key|114042|text|对我来说，上述解决方案并没有完全奏效。它移走了路线，还有所有标记，是的.但是除了起始标记外，当我console.logged这些层时，带有路径点的层仍在显示。我不知道为什么，我使用的是图形漏斗扩展，也许就是因为这个？？不管怎样，这里有一个对我有用的解决方案..。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|114043|this.map.eachLayer((layer:+any)+=>+{
++if+(layer.options.waypoints+&&+layer.options.waypoints.length)+{
++++this.map.removeLayer(layer);
+++}
});|code-block|syntax|javascript|114044|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/perliedman/lrm-graphhopper^0|2K|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>For me, the above solution did not fully work. It removed the route, and all markers, yes... but except the starting marker, and when I console.logged the layers, the layer with the waypoints was still showing. I don't know why, I am using <a href="https://github.com/perliedman/lrm-graphhopper" rel="nofollow noreferrer">lrm-graphhopper</a> extension, maybe because of that?? Anyway here is a solution that worked for me..</p>
<pre><code>this.map.eachLayer((layer: any) =&gt; {
  if (layer.options.waypoints &amp;&amp; layer.options.waypoints.length) {
    this.map.removeLayer(layer);
   }
});
</code></pre>


<p>How does one go about completely removing a route drawn previously using Leaflet Routing Machine?  Either the <a href="http://www.liedman.net/leaflet-routing-machine/api/" rel="noreferrer">docs here</a> do not explain how this is done or I have somehow managed to miss it.</p>

<p>Reading through the <a href="https://github.com/perliedman/leaflet-routing-machine/issues/5" rel="noreferrer">conversation here</a> I am currently doing something along the lines of the following</p>

<pre><code> if (routing)
 {
  routing.spliceWayPoints(0,2);
  removeControl(routing);
  routing = null;
 }
</code></pre>

<p>Whilst this works it is not clear to me that it is in fact the legitimate way to do things and it does not lead to memory leaks. I am hoping that someone here has the definitive solution.</p>


Completely remove Leaflet route

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何彻底移除以前使用传单路由机绘制的路线？要么是没有解释这是如何做到的，要么是我设法错过了它。通过阅读，我目前正在按以下思路做一些事情 if (routing) {  routing.spliceWayPoints(0,2);  removeControl(routing);  routing = null; }虽然这...

问完全移走传单路线
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问完全移走传单路线EN