英文:
Import leaftlet-control-geocoder in Angular 8 Project?
问题
以下是翻译好的部分：
Angular版本：8
package.json中的版本：
"leaflet": "1.5.1",
"leaflet-draw": "1.0.4",
"leaflet-sidebar-v2": "3.0.3",
"esri-leaflet": "2.3.2",
"leaflet-control-geocoder": "1.10.0"
我已经像这样导入了leaflet和其他内容：
import * as L from 'leaflet';
import 'leaflet-draw';
import * as esri from 'esri-leaflet';
import 'leaflet-sidebar-v2';
import 'leaflet-control-geocoder';
现在我需要使用leaflet-control-geocoder来实现这个功能，但如果我写这个：
L.control.geocoder().addTo(map);
Angular会崩溃（属性'geocoder'在类型'typeof Control'上不存在）。
我也尝试了esri-leaflet-geocoder，但它也崩溃了。
有解决方案吗？
英文:
angular verison: 8
version in package.json:
"leaflet": "1.5.1",
"leaflet-draw": "1.0.4",
"leaflet-sidebar-v2": "3.0.3",
"esri-leaflet": "2.3.2",
"leaflet-control-geocoder": "1.10.0"
I have import leaflet and other like this:
import * as L from 'leaflet';
import 'leaflet-draw';
import * as esri from 'esri-leaflet';
import 'leaflet-sidebar-v2';
import 'leaflet-control-geocoder';
Now i have to use or leaflet-control-geocoder to implement this function but if i write this:
L.control.geocoder().addTo(map);
angular crash.(Property 'geocoder' does not exist on type 'typeof Control')
I try also with esri-leaflet-geocoder, but it's crash too.
any solution?
答案1
得分: 3
我遇到了相同的问题。我通过以下方式解决了它
import * as L from 'leaflet';
import Geocoder from 'leaflet-control-geocoder';
// ...
this.map = L.map('map', {
center: [staticLatLng.lat, staticLatLng.lng],
zoom: zoomLevel
});
const GeocoderControl = new Geocoder();
GeocoderControl.addTo(this.map);
GeocoderControl.on('markgeocode', function (e) {
console.log(e);
});
// ...
英文:
I had the same problem. I fixed it by doing so
import * as L from 'leaflet';
import Geocoder from 'leaflet-control-geocoder';
...
this.map = L.map('map', {
center: [staticLatLng.lat, staticLatLng.lng],
zoom: zoomLevel
});
const GeocoderControl = new Geocoder();
GeocoderControl.addTo(this.map);
GeocoderControl.on('markgeocode', function (e) {
console.log(e);
});
...
答案2
得分: 0
请尝试使用大写字母 "C"， L.Control.geocoder().addTo(map)，
或者（但效果应该相同）
var geocoder = new L.Control.geocoder();
map.addControl(geocoder);
英文:
Pls try with uppercase "C" L.Control.geocoder().addTo(map)
or (but that should have the same effect)
var geocoder = new L.Control.geocoder();
map.addControl(geocoder);
答案3
得分: 0
我遇到了相同的问题。我将geocoder添加到L.Routing.control内部，它可以工作！（实际上，VS Code仍然显示“属性'Geocoder'在'typeof Control'上不存在”），但它可以工作！：
L.Routing.control({
waypoints: [L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949)],
showAlternatives: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(this.map);
我正在使用Angular 8和leaftlet-routing-machine插件。
英文:
I had the same problem. I added the geocoder inside L.Routing.control, and it works! (actually, VS Code still says Property 'Geocoder' does not exist on type 'typeof Control') but it works!:
L.Routing.control({
waypoints: [L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949)],
showAlternatives: true,
geocoder: L.Control.Geocoder.nominatim()
}).addTo(this.map);
I'm working with Angular 8, leaftlet-routing-machine plugin.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论