Question

技术堆栈

AngularJS v1.2.28 - 无法更改此

Angular Leaflet Directive

宣传单1.0.0-beta.2

Esri Leaflet v2.0.0-beta.6

简介

我遇到了一些麻烦。我尝试使用leaflet-hash.js作为一种允许用户与他人共享位置的方法。问题是，如果我更改location.replace(hash)，我可以在网址中显示哈希值。但是根据我改变它的原因会出现一些问题。下面我概述了我想要实现的目标，以及我已经尝试过的和结果。

所需行为

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

在主页上键入地址，然后单击搜索按钮。
点击首页上的县名。
输入带有地图坐标的网址（例如 http://www.myapp.com/map#10/39.4378/-76.5841）。
输入没有坐标的地图页面的网址（例如 http://www.myapp.com/map）。

用户还应该能够在地图页面上缩放/移动，并且坐标将在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);

我没有得到摘要错误或常量页面刷新但是网址中的哈希值不应该是（例如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;

    }
},

我不知道我哪里出错了。我认为问题可能出在插件中，但也许我的代码是导致它的原因？

更新

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

使用location.replace（hash）在URL中显示哈希

1 个答案: