使用location.replace顯示散列URL（散）

AngularJS v1.2.28 - 不能改變這個

角單張指令

單張1.0.0 beta.2

ESRI的單張V2.0.0-beta.6

介紹

我遇到了一些麻煩。我正在嘗試使用leaflet-hash.js作爲允許用戶與其他人分享位置的方式。問題是如果我更改location.replace(hash)，我可以讓哈希出現在URL中。但是根據我的改變，會出現一些問題。下面我概述了我試圖實現的目標，以及我已經嘗試過的和結果。

期望的行爲

用戶應該能夠訪問地圖頁面中4種方式：

類型首頁上的地址，然後單擊搜索按鈕。
在主頁上點擊縣名。
輸入包含地圖座標的URL（例如 http://www.myapp.com/map#10/39.4378/-76.5841）。
輸入不帶座標的地圖頁面的URL（例如 http://www.myapp.com/map）。

用戶還應該能夠在地圖頁面上縮放/移動，座標將在URL哈希中更改。

如果用戶只輸入通用地圖URL（http://www.myapp.com/map），則會自動進入全州範圍縮放級別（http://www.myapp.com/map#8/38.903/-76.776）。

的問題

我的問題僅涉及數字3和4上面。

按照原樣使用插件，無論使用上述4種方法中的哪一種，我都將其重定向回主頁。我相信這段代碼是罪魁禍首：

location.replace(hash);

如果我將其更改爲：

location.hash = hash;

哈希將出現在URL，但我得到了下面的錯誤，不斷頁當我嘗試使用方法4訪問地圖頁時刷新：

[$rootScope:infdig] 10 $digest() iterations reached. Aborting!

如果我行更改爲：

location.hash.replace(hash);

我不會摘要錯誤或恆定頁面清爽，但散列是不是在URL像它應該是（例如http://www.myapp.com/map代替http://www.myapp.com/map#10/39.4378/-76.5841）

出現這種情況，無論我是否使用訪問方法3或4

我的代碼

在地圖加載我檢查的＃的存在，然後確定什麼，如果任何，我的幾何形狀也應顯示：

leafletData.getMap("map").then(function(map) { 
    $scope.map = map; 
    var hash = new L.Hash($scope.map); 
    var checkLocation = window.location.href; 
    //No # in URL 
    if (checkLocation.indexOf("#") <= 0) { 
     if (searchResults.geojson) { 
      // dealing w/ polygon 
      // CODE TO DISPLAY POLYGON 
     } else if (searchResults.latlng) { 
      // dealing w/ point 
      // CODE TO DISPLAY POINT 
     } else { 
      // no geometry so go with default view 
      // CODE TO DISPLAY DEFAULT VIEW 
     } 
    } 
    // # in URL 
    else { 
     var url = decodeURIComponent(window.location.href); 
     if (searchResults.geojson) { 
      // dealing w/ polygon 
      // CODE TO DISPLAY POLYGON 
     } else if (searchResults.latlng) { 
      // dealing w/ point 
      // CODE TO DISPLAY POINT 
     } else { 
      // no geometry so go with default view 
      var n = url.lastIndexOf('#'); 
      var hashOnly = url.substring(n); 
      var mapView = parseUrlHash(hashOnly); 
      console.log(mapView); 
      $scope.map.setView([mapView.lat, mapView.lng], mapView.zoom); 
     } 

    } 

});

傳單哈希插件代碼

我只發佈了我認爲與我的評論相關的部分。完整的代碼可以在這裏找到： leaflet-hash.js

onMapMove: function() { 

    // bail if we're moving the map (updating from a hash), 
    // or if the map is not yet loaded 

    if (this.movingMap || !this.map._loaded) { 
     return false; 
    } 

    var hash = this.formatHash(this.map); 
    hash = decodeURIComponent(hash); 
    if (this.lastHash != hash) { 
     //[A] Original code 
     // Automatically redirects you back to the home page 
     //location.replace(hash); 

     //[B] Suggestion from GitHub 
     //https://github.com/mlevans/leaflet-hash/issues/45 
     // Shows hash in URL but causes this: Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! 
     // and constant page refreshing when trying to access map page using method 4. 
     location.hash = hash; 

     //[C] Fixes errors in [B] but hash does not appear in the URL 
     // I need it to be in the URL so users can share location 
     //location.hash.replace(); 

     //[D] Same as [C] 
     //location.hash.replace(hash); 

     this.lastHash = hash; 

    } 
},

我不知道我要去哪裏錯了。我認爲這個問題可能在插件中，但也許我的代碼是什麼造成的？

UPDATE

在app.js我有$locationProvider.html5Mode(true);。這可能導致衝突嗎？

來源

2017-01-24 user3333257

'window.location.hash'？ – Jack

也許

var curHash = location.hash?location.hash.substring(1); 
if (hash!=curHash) location.replace(
    curHash?location.href.split("#")[0]+"#"+hash:location.href+"#"+hash 
);

來源

2017-01-24 16:42:41 mplungjan

當我進入'http：// www.myapp.com/map'時，這給了我相同的摘要錯誤和不斷刷新。 – user3333257

查看更新...... – mplungjan

我認爲這個問題可能會更深。你看到我發佈的更新嗎？ – user3333257

使用location.replace顯示散列URL（散）

回答

相關問題