Leaflet routing machine error: Geocoder is undefined
Leaflet routing machine error: Geocoder is undefined
传单路由机器有问题。非常基本的代码
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
]
}).addTo(mymap);
运行 可以。
但是,一旦我像 http://www.liedman.net/leaflet-routing-machine/tutorials/ 中描述的那样添加更多代码,就会出现错误。
例如,这不起作用:
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(mymap);
它返回 TypeError: L.Control.Geocoder is undefined
。
我刚刚重新下载了插件以确保没有任何意外修改,但仍然如此。
我的 index.html 看起来像这样:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Map</title>
<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />
<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />
<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />
<link type="text/css" rel="stylesheet" href="css/mycss.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>
</head>
<body>
<!-- mapbox -->
<div id="map" class="map"></div>
<!-- custom script containing routing machine and other stuff (which works all fine)!-->
<script type="text/javascript" src="javascript/myscript.js"></script>
</body>
</html>
.js 和 .css 文件的路径都很好。
我的带有底图之一的传单地图 var 如下所示:
var mymap = L.map('map', {
center: [57.89, 12.02],
zoom: 13.5,
fullscreenControl: true
});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{ attribution: '© <a href="http://osm.org/copyright" target = "_blank">OpenStreetMap</a>'
}).addTo(mymap);
什么可能导致 TypeError: L.Control.Geocoder is undefined
错误以及如何解决?
我安装了 https://github.com/perliedman/leaflet-control-geocoder 插件,现在可以使用了。虽然没有任何地方说明这是先决条件...
传单路由机器有问题。非常基本的代码
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
]
}).addTo(mymap);
运行 可以。
但是,一旦我像 http://www.liedman.net/leaflet-routing-machine/tutorials/ 中描述的那样添加更多代码,就会出现错误。 例如,这不起作用:
var routingtest = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(mymap);
它返回 TypeError: L.Control.Geocoder is undefined
。
我刚刚重新下载了插件以确保没有任何意外修改,但仍然如此。
我的 index.html 看起来像这样:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Map</title>
<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />
<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />
<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />
<link type="text/css" rel="stylesheet" href="css/mycss.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>
<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>
</head>
<body>
<!-- mapbox -->
<div id="map" class="map"></div>
<!-- custom script containing routing machine and other stuff (which works all fine)!-->
<script type="text/javascript" src="javascript/myscript.js"></script>
</body>
</html>
.js 和 .css 文件的路径都很好。
我的带有底图之一的传单地图 var 如下所示:
var mymap = L.map('map', {
center: [57.89, 12.02],
zoom: 13.5,
fullscreenControl: true
});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{ attribution: '© <a href="http://osm.org/copyright" target = "_blank">OpenStreetMap</a>'
}).addTo(mymap);
什么可能导致 TypeError: L.Control.Geocoder is undefined
错误以及如何解决?
我安装了 https://github.com/perliedman/leaflet-control-geocoder 插件,现在可以使用了。虽然没有任何地方说明这是先决条件...