Question

我希望能够将我的地图置于预先输入的位置。例如：

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

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

假设第1页的输入已保存到变量＆＃39; location＆＃39;，我已尝试过：

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

Answer 1

很遗憾，您无法简单地将JavaScript变量的值从一个页面传递到另一个页面。您需要使用“持久性”存储，下一页可以读取并执行操作（例如将视图设置为以前用户提供的位置并根据需要进行缩放）。

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

使用浏览器位置栏，通常使用哈希/片段部分。请参阅插件Leaflet.RestoreView。
使用浏览器HTML5 localStotarge。请参阅插件Leaflet-hash。

您也可以尝试other Leaflet plugins。

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

方法1的好处在于，您实际上可以将链接用作永久链接到第二页，直接指向正确的位置！

编辑：

要检索位置栏中的网址的哈希部分（方法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();

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

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

2 个答案: