使用 location.replace(hash) 在 URL 中显示哈希

Question

技术栈

AngularJS v1.2.28 - 无法更改

Angular 传单指令

传单 1.0.0-beta.2

Esri Leaflet v2.0.0-beta.6

简介

我遇到了一些麻烦。我正在尝试使用leaflet-hash.js 作为一种允许用户与他人共享其位置的方式。问题是如果我更改location.replace(hash)，我可以让哈希出现在 URL 中。但是根据我将其更改为的内容，会出现一些问题。下面我概述了我正在努力实现的目标以及我已经尝试过的目标以及结果。

期望的行为

用户应该能够通过 4 种方式访问​​地图页面：

1. 在主页上输入地址并点击搜索按钮。
2. 点击主页上的县名。
3. 输入带有地图坐标的 URL（例如 http://www.myapp.com/map#10/39.4378/-76.5841)。
4. 输入地图页面的 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);
        }

    }

});

传单散列插件代码

我只发布了我认为与我的 cmets 相关的部分。完整的代码可以在这里找到： 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;

    }
},

我不确定我哪里出错了。我认为问题可能出在插件中，但也许是我的代码造成的？

更新

在 app.js 我有$locationProvider.html5Mode(true);。这会导致冲突吗？

Answer 1

也许

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