4

我一直在尝试在 angularjs 中使用 mapbox.js 地理地图。

地图：http ://bl.ocks.org/wboykinm/c77e7c891bfc52157843#index.html

JSON数据：http ://bl.ocks.org/wboykinm/raw/c77e7c891bfc52157843/42d7ab5d1a432a88e905bf14705424ac40ba4480/saplaces.geojson

当我尝试在 angularjs 中使用该代码时，页面上什么也看不到。只是空的。

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load Jquery Style -->

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />

 <style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
    }
</style>


<!-- load jQuery, d3 and angular via CDN -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js">   </script>
 <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'>
</script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-resource.min.js"> </script>


</head>

<body ng-app="myApp">

   <header id="wrapper">
    <nav class="navbar navbar-default" style="background: #FBFAFF;">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">
                     <p style="margin:0;padding:0;font-weight:bold;font- size:1.05em;">Geo Map Using Mapbox</p>
                </a>
            </div>

            <ul class="nav navbar-nav navbar-right small" style="font-weight:bold;font-size:1em;">
                <li><a href="#/geomap"><i></i> Geo Map</a>
                </li>
            </ul>
        </div>
    </nav>
</header>


<h2> This is main page </h2>    

<div ng-view>
</div>


<script>
    var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);


    myApp.config(function ($routeProvider) {
        $routeProvider
            .when('/geomap', {
                templateUrl: 'pages/geomap.html',
                controller: 'firstController'
            })

    });


    myApp.controller('firstController', ['$rootScope', '$scope', '$log', '$location', '$timeout', '$http',
        function ($rootScope, $scope, $log, $location, $timeout, $http) {                

            var baseLayer =    L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-4y9ngu48/{z}/{x}/{y}.png', {
                maxZoom: 18
            });

            // DEFINE THE CLUSTER LAYER
            var markers = L.markerClusterGroup();

            $http.get('json/mapjson.json')
                .success(function (data) {                        
                    console.log(data)
                    var geojson = L.geoJson(data, {
                        onEachFeature: function (feature, layer) {
                            // USE A CUSTOM MARKER
                            layer.setIcon(L.mapbox.marker.icon({
                                'marker-symbol': 'circle-stroked',
                                'marker-color': '59245f'
                            }));
                        }
                    });
                    markers.addLayer(geojson);

                    // CONSTRUCT THE MAP
                    var map = L.map('map', {
                        maxZoom: 9
                    }).fitBounds(markers.getBounds());

                    baseLayer.addTo(map);
                    markers.addTo(map);
                })
 }])
</script>
</body>
</html>

geomap.html 文件：

<div id="map">
</div>
<p> In the map page </p>

我无法修复它。谁能提供一些想法我做错了什么。我还附上了我网页的快照。

注意：还有另一个小问题。当我尝试 $http.get 直接访问 url ' http://bl.ocks.org/wboykinm/raw/c77e7c891bfc52157843/42d7ab5d1a432a88e905bf14705424ac40ba4480/saplaces.geojson '时，我收到了 Cross origin 错误。所以我已经将 json 下载到本地文件中并使用它。任何想法如何避免这种情况。

在此处输入图像描述

4

1 回答 1

5

您遇到的问题是，在您创建 的新实例时L.mapbox.map，您的模板尚不可用。因此实例可以找到构建地图所需的元素。解决方案是创建一个指令，该指令创建您的地图实例并将其传递回控制器中的回调函数，以便您可以使用它：

样式表：

body {
    margin: 0;
}

body, html, .leaflet-container {
    height: 100%;
}

模板：

<mapbox callback="callback"></mapbox>

指示：

angular.module('app').directive('mapbox', [
    function () {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                callback: "="
            },
            template: '<div></div>',
            link: function (scope, element, attributes) {
                L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
                var map = L.mapbox.map(element[0], 'examples.map-i86nkdio');
                scope.callback(map);
            }
        };
    }
]);

控制器：

angular.module('app').controller('rootController', [
    '$scope',
    function ($scope) {
        // Gets called when the directive is ready:
        $scope.callback = function (map) {
            // Map is available here to use:
            map.setView([51.433333, 5.483333], 12);
        };
    }
]);

这是 Plunker 上的一个工作示例：http ://plnkr.co/edit/p7aWsLofWZZtADXLcWxd?p=preview （您不应该使用示例 mapid 和用户令牌，您必须用自己的替换它们）

您遇到的另一个问题 CORS 问题无法解决，只要您不控制从中下载文件的服务器即可。如果您正在控制服务器，您可以设置access-control-allow-origin标头以接受您的请求。但是由于您没有控制服务器，因此您不能。只需将文件下载到您自己的服务器即可。一种解决方法是使用添加正确标头的代理，但您必须记住，如果您没有权限，则不会在其他人的带宽上运行。他们可能会阻止您或更糟。如果他们希望人们直接从他们的服务器上运行文件，他们就会这样做，这样你就可以了。

以下是有关 CORS 的更多信息：http ://en.wikipedia.org/wiki/Cross-origin_resource_sharing

于 2015-02-26T18:43:20.957 回答