Я пытался использовать географическую карту mapbox.js в angularjs.
Карта: 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>
файл геокарты.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 в локальный файл и использую его. Любая идея, как этого избежать.
