我一直在尝试在 angularjs 中使用 mapbox.js 地理 map 。
map :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 时'，我收到了交叉原点错误。所以我已经将 json 下载到本地文件中并使用它。任何想法如何避免这种情况。
最佳答案
您遇到的问题是，目前您正在创建 L.mapbox.map 的新实例。 ，您的模板尚不可用。因此，实例可以找到构建 map 所需的元素。解决方案是创建一个指令来创建您的 map 实例并将其传递回 Controller 中的回调函数，以便您可以使用它:
样式表:
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);
}
};
}
]);
Controller :
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 和用户 token ，你必须用你自己的替换它们)
您遇到的另一个 CORS 问题无法解决，只要您不控制从中下载文件的服务器即可。如果您正在控制服务器，您可以设置
access-control-allow-origin头接受您的请求。但是由于您没有控制服务器，所以您不能。只需将文件下载到您自己的服务器即可。解决方法是使用添加正确 header 的代理，但您必须记住，如果您没有权限，则不会在其他人的带宽上运行。他们可能会阻止您或更糟。如果他们想让人们直接从他们的服务器上运行文件，他们就会这样做，这样你就可以了。以下是有关 CORS 的更多信息:http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
关于angularjs - Mapbox.js 不适用于 Angular.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28749593/