javascript - leaflet geosearch - 从传单 map 容器外部搜索位置

Question

我希望能够将我的 map 集中在预先输入的位置。例如:

第 1 页:用户提交位置并重定向到第 2 页

第 2 页:从第 1 页获取输入，并根据位置将 map 居中

假设第 1 页的输入保存到变量“位置”中，我尝试过:

<script src="/static/js/leaflet.js" type="text/javascript"></script>
<script src="/static/js/l.control.geosearch.js" type="text/javascript"></script>
<script src="/static/js/l.geosearch.provider.google.js" type="text/javascript"></script>
<script type="text/javascript">
    var googleGeocodeProvider = new L.GeoSearch.Provider.Google();
    var map = L.map('map', {center: [30.27, -97.75], zoom: 10, maxZoom: 18, minZoom: 3});
    L.tileLayer(''http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map);
    var geosearch = new L.Control.GeoSearch({
        provider: googleGeocodeProvider
    }).addTo(map);
    googleGeocodeProvider.GetLocations(location, function (data) {
        console.log(data);  # according to docs (https://github.com/smeijer/L.GeoSearch), data should have the x,y info I'm looking for
    });

上面的代码返回错误:

Uncaught TypeError: Cannot read property 'geocode' of      undefinedL.GeoSearch.Provider.Google.L.Class.extend.GetLocations @  l.geosearch.provider.google.js:39(anonymous function) @ (index):357

编辑:

抱歉 Ghybs，我应该更清楚地了解我遇到的问题。我正在使用 django 来服务 Web 请求，并且能够轻松地在页面之间传递变量。问题是我无法使用给定的查询在传单 map 之外调用地理搜索并让它返回我需要重新居中 map 的坐标。

Answer 1

不幸的是，您无法简单地将 JavaScript 变量的值从一个页面传递到另一个页面。您需要使用“持久”存储，下一页可以读取该存储并对其执行操作(例如根据需要将 View 设置为先前用户提供的位置和缩放)。

这样做的两种简单方法是:

• 与浏览器地址栏一起，通常使用哈希/片段部分。请参阅插件 Leaflet.RestoreView .
• 使用浏览器 HTML5 localStoterge。请参阅插件 Leaflet-hash .

您也可以尝试other Leaflet plugins .

您还可以尝试实现您自己的方法 1 版本，以便将“位置”直接作为地理编码提供程序对象可以管理的字符串传递，而不是坐标(例如使用第二个插件完成的操作) 。它可以写在 hash or the query part 中。 。有许多小型 JavaScript 库可以帮助您实现这一点。

方法 1 的优点是，您实际上可以使用该链接作为第二页的永久链接，直接指向正确的位置!

<小时/>

编辑:

要检索地址栏中 URL 的哈希部分(方法 1)，请参阅 that post .

既然您标记了 jQuery，您可以使用它 store / retrieve data in localStorage (方法2)。