logo标签列表

在Leaflet地图中使用GeoSearch无法正确搜索地点

javascriptleafletgeocoding
3
我正在使用 Leaflet 地图搜索插件 https://github.com/smeijer/leaflet-geosearch，这是插件的存储库。我的代码非常简单，但我无法在地图中获得搜索结果。我不知道出了什么问题。控制台报错如下：

TypeError: 无法将未定义值转换为对象

我希望当我点击搜索结果时，能够在地图上得到一个标记，类似于此网站在 Google Map 部分所展示的标记：https://investigadoresparaguayosenelmundo.com/registration/

以下是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
    <!--CDN para agregar los cluster de Leaflet-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <!--CDN para el plugin de fullscreen del mapa-->
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
    <!--CDN para agregar la barra de busqueda-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.css"/>
    <!-- Make sure you put this AFtER leaflet.js, when using with leaflet -->
    <script src="https://unpkg.com/leaflet-geosearch@3.0.0/dist/geosearch.umd.js"></script>
</head>
<body>
<div id="leafletMap-registration"></div>
</body>
</html>

CSS：
#leafletMap-registration {
        height: 400px;  /* The height is 400 pixels */
}

Javascript：

// you want to get it of the window global
    const providerOSM = new GeoSearch.OpenStreetMapProvider();

    //leaflet map
    var leafletMap = L.map('leafletMap-registration', {
    fullscreenControl: true,
    // OR
    fullscreenControl: {
        pseudoFullscreen: false // if true, fullscreen to page width and height
    },
    minZoom: 2
    }).setView([0,0], 2);

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

    const search = new GeoSearch.GeoSearchControl({
        provider: providerOSM,
        style: 'bar',
        searchLabel: 'Buscar institución',
        autoClose: true,
    });

    leafletMap.addControl(search);

https://jsbin.com/lukikafalo/1/edit?html,css,js,console,output

1
升级到 leaflet-geosearch v3.0.4 后无法再现，可能是由于 https://github.com/smeijer/leaflet-geosearch/commit/d6727a1c1ba276369a575b17c8eeca9fee8db16d。 - IvanSanchez
但我认为我正在使用v3.0.0（我想），请看我的HTML，在那里我添加了插件。 - Oscar Gonzalez
4
升级到3.0.4版本，问题应该会解决。 - IvanSanchez
@IvanSanchez 谢谢兄弟，你是我的救命稻草，在官方文档中CDN并没有被更新:( - azizikri
1个回答
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接