搜索时使用 Leaflet Geocoder 而不设置标记答案

【问题标题】：Use Leaflet Geocoder without setting a marker when searching搜索时使用 Leaflet Geocoder 而不设置标记
【发布时间】：2018-07-22 17:40:31
【问题描述】：

目前我正在使用传单地图并添加了这个地理编码器插件：https://github.com/perliedman/leaflet-control-geocoder。我的问题是，每次我搜索一个地方时，它也会在这个位置设置一个标记，但我不希望它这样做。它应该只放大而不设置标记。

有人知道如何禁用此功能或立即删除设置标记吗？

The set marker looks like this

我在 Ionic/typescript 中工作，我使用地理编码器的代码是这样的：

leaflet.Control.geocoder().addTo(this.map);

根据 GitHub，defaultMarkGeocode:false 应该禁用标记。使用它时，我只是得到这个错误：

无法读取未定义的属性“_leaflet_id”

我也试过

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false
})
.on('markgeocode', function(e) {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
         bbox.getSouthEast(),
         bbox.getNorthEast(),
         bbox.getNorthWest(),
         bbox.getSouthWest()
    ]).addTo(map);
    map.fitBounds(poly.getBounds());
})
.addTo(map);

但它只是告诉我变量地理编码器从未使用过，我收到此错误：

无法读取未定义的属性“addLayer”

如果您对如何修复它以及禁用或删除此标记有任何建议，我将非常感激。

问候

【问题讨论】：

如果没有看到您的所有代码，我真的无法判断，但是您是否需要在地理编码器对象上使用 .addTo(this.map) 而不是 addTo(map)？

标签： typescript ionic-framework ionic3 leaflet geocoder

【解决方案1】：

无法重现您描述的确切错误消息：

var map = L.map('map').setView([0, 0], 2);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false,
    collapsed: false
  })
  .on('markgeocode', function(e) {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
      bbox.getSouthEast(),
      bbox.getNorthEast(),
      bbox.getNorthWest(),
      bbox.getSouthWest()
    ]).addTo(map);
    map.fitBounds(poly.getBounds());
  })
  .addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@1.5.8/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder@1.5.8/dist/Control.Geocoder.js"></script>

<div id="map"></div>

但是，当collapsed 选项设置为false 时，还有另一个错误消息：

TypeError: this.options.geocoder[mode] 不是函数

…PR perliedman/leaflet-control-geocoder#184 在插件 repo 中解决了这个问题，但尚未在 npm / unpkg CDN 中发布版本。

如果您需要有关错误消息的进一步帮助，请提供code that reproduces them。

【讨论】：

嘿，同时我通过使用另一个地理编码插件解决了这个问题，但非常感谢您的帮助！

【解决方案2】：

请稍作修改即可尝试。

var map = L.map('map').setView([0, 0], 2);

var geocoder = L.Control.geocoder({
    defaultMarkGeocode: false,
    collapsed: false
  })
  .on('markgeocode', (e) => {
    var bbox = e.geocode.bbox;
    var poly = L.polygon([
      bbox.getSouthEast(),
      bbox.getNorthEast(),
      bbox.getNorthWest(),
      bbox.getSouthWest()
    ]).addTo(map);
    map.fitBounds(poly.getBounds());
  })
  .addTo(map);

【讨论】：