單張地理搜索-從單張地圖容器外部搜索位置

Question

我希望能夠將地圖集中在預先輸入的位置。 例如：

第1頁：用戶提交位置並重定向到第2頁

第2頁：從第1頁獲取輸入，並根據位置將地圖居中

假設第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請求，並且能夠輕松在頁面之間傳遞變量。 問題是，我無法通過給定的查詢在傳單地圖之外調用geosearch，而讓它返回我需要重新定位地圖中心的坐標。

Answer 1

不幸的是，您不能簡單地將JavaScript變量的值從一頁傳遞到另一頁。 您需要使用“永久”存儲，下一頁可以讀取並對其進行操作（例如，根據需要將視圖設置為以前用戶提供的位置和縮放）。

這樣做的2種簡單方法是：

• 使用瀏覽器位置欄，通常使用哈希/片段部分。 參見插件Leaflet.RestoreView 。
• 使用瀏覽器HTML5 localStotarge。 參見插件Leaflet-hash 。

您也可以嘗試其他Leaflet插件 。

您還可以嘗試實現自己的方法1版本，以便直接將“位置”作為地理編碼提供程序對象可以管理的字符串傳遞，而不是通過坐標傳遞（例如，使用第二個插件完成）。 它可以寫在哈希或查詢部分 。 有許多小型JavaScript庫可以幫助您解決這一問題。

方法1的一個好處是，您實際上可以將鏈接用作指向第二頁的永久鏈接，該鏈接直接指向正確的位置！

---

編輯：

有關在位置欄中檢索URL的哈希部分（方法1）的信息，請參閱該文章 。

由於標記了jQuery，因此可以使用它在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函數）