传单地理搜索 - 从传单地图容器外部搜索位置

Question

我希望能够让我的地图以预先输入的位置为中心。例如：

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

第 2 页：从第 1 页获取输入并根据位置居中地图

假设第 1 页的输入被保存到变量 'location'，我试过：

<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
    });

以上代码return错误：

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 请求，并且能够轻松地在页面之间传递变量。问题是我无法使用给定的查询在传单地图之外调用地理搜索并使其 return 我需要重新居中地图的坐标。

Answer 1

不幸的是，您不能简单地将 JavaScript 变量的值从一个页面传递到另一个页面。您需要使用 "persistent" 存储，以便下一页可以读取并执行操作（例如将视图设置为先前用户提供的位置并根据需要进行缩放）。

2 种简单的方法是：

配合浏览器地址栏，通常使用hash/fragment部分。请参阅插件 Leaflet.RestoreView。
使用浏览器HTML5 localStotarge。请参阅插件 Leaflet-hash。

你也可以试试other Leaflet plugins.

您也可以尝试实现您自己的方法 1 版本，这样您就可以将 "location" 作为您的地理编码提供程序对象可以管理的字符串直接传递，而不是坐标（与第二个方法一样）例如插件）。它可以写在 hash or the query part 中。有许多小型 JavaScript 库可以帮助您。

方法 1 的优点是您实际上可以将 link 用作 permalink 到直接指向正确的位置！

编辑：

要在地址栏中检索 URL 的哈希部分（方法 1），请参阅 that post。

由于您标记了 jQuery，您可以将其用于 store / retrieve data in localStorage（方法 2）。

Answer 2

我通过自定义 l.geosearch.provider.google.js 脚本解决了我得到的错误，替换：

var geocoder = L.GeoSearch.Provider.Google.Geocoder;

与：

var geocoder;
if (L.GeoSearch.Provider.Google.Geocoder)
    geocoder = L.GeoSearch.Provider.Google.Geocoder;
else
    geocoder = new google.maps.Geocoder();

如果有人有更好的解决方案，请告诉我！（例如以某种方式在地图对象中调用地理搜索功能）

传单地理搜索 - 从传单地图容器外部搜索位置

leaflet geosearch - search for location from outside of leaflet map container

javascript

jquery

leaflet