Leaflet Control Search Error: Uncaught TypeError: L.Control.geocoder is not a function

Question

我是 Leaflet 的新手，我想在我的地图中添加控件搜索，但我遇到了这个错误

Uncaught TypeError: L.Control.geocoder is not a function

我已经添加了这些链接

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

我初始化了我的地图

var map = L.map('map').setView([40.71455, -74.00712], 10);

然后添加底图

var dark_matrix = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
minZoom: 3,
maxZoom: 20,
attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
dark_matrix.addTo(map);

像这样添加控件

L.Control.geocoder().addTo(map);

这个我也试过

var searchControl = L.Control.geocoder();
searchControl.addTo(map);

但是还是不行。

这是项目的jsfiddle https://jsfiddle.net/mgy01hwx/1/

Answer 1

只需更改脚本文件的顺序即可。该插件需要先导入传单代码才能工作。

第一次导入leaflet.js

然后导入leaflet-geocoder.js

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> 
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

Demo

Leaflet Control Search Error: Uncaught TypeError: L.Control.geocoder is not a function

Leaflet Control Search Error: Uncaught TypeError: L.Control.geocoder is not a function

javascript

leaflet