如何使用 Leaflet Control Geocode？答案

【问题标题】：How Can I work with Leaflet Control Geocode?如何使用 Leaflet Control Geocode？
【发布时间】：2020-04-08 13:55:53
【问题描述】：

我计划在我的应用程序中添加一个leaflet 控制地理编码器或一个搜索框。尽管我编写了所需的代码，但它没有显示任何地理编码器和我不知道出了什么问题。我提供了我的index.html 的一部分包含相关代码的文件。

<link rel="stylesheet" href="{% static 'geocoder/Control.Geocoder.css' %}" />
<script type="text/javascript" src="{% static 'geocoder/Control.Geocoder.js' %}"></script>

<script>
var geocoder = L.Control.geocoder().on('markgeocode', function(event) {
     var center = event.geocode.center;
     L.marker(center).addTo(map);
     map.setView(center, map.getZoom());
}).addTo(map);
</script>

【问题讨论】：

您确定库正在加载吗？控制台出现404或其他错误？
我正在使用两个文件，包括 Control.Geocoder.css 和 Control.Geocoder.js。我的地图的其他部分工作没有任何问题，但我不知道为什么它不显示地理编码器！

标签： javascript html leaflet geocoder

【解决方案1】：

您必须设置地理编码“类型”：Types

var _geocoderType = L.Control.Geocoder.nominatim();
var geocoder = L.Control.geocoder({
   geocoder: _geocoderType
}).addTo(map);

geocoder.on('markgeocode', function(event) {
     var center = event.geocode.center;
     L.marker(center).addTo(map);
     map.setView(center, map.getZoom());
});

【讨论】：

谢谢...我把那部分放在地图功能的开头，现在可以了