简体中文

AngularJS 教程

AngularJS 应用

AngularJS 与 Leaflet 应用：初学者指南

你好，未来的编程巨星们！今天，我们将踏上一段激动人心的旅程，探索 AngularJS 和 Leaflet 的世界。如果这些术语现在对你来说像是外语，别担心——在本教程结束时，你将能够迅速流利地使用“网页地图”！

AngularJS - Leaflet Application

AngularJS 和 Leaflet 是什么？

在深入代码之前，让我们先了解这些技术是什么：

AngularJS

AngularJS 是一个强大的 JavaScript 框架，帮助我们构建动态网页应用。把它想象成一个超级聪明的助手，组织你的代码并使你的网站具有交互性。

Leaflet

Leaflet 是一个开源的 JavaScript 库，用于制作移动友好的交互式地图。它就像 Google Maps，但你可以成为老板，决定你的地图的外观和功能！

现在我们已经介绍了基础知识，让我们卷起袖子，开始构建我们自己的地图应用吧！

设置我们的项目

首先，我们需要设置我们的项目。别担心，这比组装宜家家具简单多了！

第一步：创建 HTML 文件

创建一个名为 index.html 的新文件，并粘贴以下代码：

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>我的超棒地图应用</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body ng-controller="MapController">
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>

这个 HTML 文件就像是我们的应用的骨架。它包含了所有必要的库（AngularJS 和 Leaflet）并为我们的地图设置了一个 div。

第二步：创建 JavaScript 文件

现在，让我们创建我们的 app.js 文件。这里是魔法发生的地方！

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap 贡献者'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('一个漂亮的 CSS3 弹窗。<br>容易自定义。')
.openPopup();
});

让我们分解一下：

  1. 我们创建了一个名为 'leafletApp' 的 Angular 模块。
  2. 我们定义了一个名为 'MapController' 的控制器。
  3. 在控制器内部，我们初始化了一个 Leaflet 地图，设置其视角为伦敦（你可以将此更改为任何你喜欢的坐标），并添加了一个来自 OpenStreetMap 的瓦片图层。
  4. 最后，我们在地图上添加了一个带有弹窗的标记。

理解代码

现在我们的基本地图已经运行，让我们更深入地了解我们代码的每个部分。

HTML 文件

<html ng-app="leafletApp">

这行代码告诉 AngularJS，这是我们的应用的根元素。这个元素内的所有内容都将由 AngularJS 管理。

<body ng-controller="MapController">

这行代码将我们的 MapController 与 HTML 的 body 关联起来。这意味着我们在 MapController 中定义的所有逻辑都将在 body 内部可用。

<div id="map"></div>

这是我们的地图将被渲染的地方。Leaflet 将使用这个 div 来创建地图。

JavaScript 文件

var app = angular.module('leafletApp', []);

这行代码创建了一个新的 AngularJS 模块。把模块想象成你应用的容器。

app.controller('MapController', function($scope) {
// 控制器逻辑在这里
});

这是定义我们 MapController 的地方。$scope 是一个特殊对象，作为控制器和视图（我们的 HTML）之间的桥梁。

var map = L.map('map').setView([51.505, -0.09], 13);

这行代码初始化了我们的 Leaflet 地图。'map' 是我们的 div 的 id，[51.505, -0.09] 是我们地图中心的坐标（纬度和经度），13 是缩放级别。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap 贡献者'
}).addTo(map);

这行代码为我们的地图添加了一个瓦片图层。瓦片图层是实际的地图图像。这里我们使用的是 OpenStreetMap 的瓦片。

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('一个漂亮的 CSS3 弹窗。<br>容易自定义。')
.openPopup();

这行代码在我们的地图上添加了一个标记，并为它绑定了一个弹窗，然后打开这个弹窗。

添加交互性

现在我们有了基本的地图，让我们使它更具交互性！我们将添加一个功能，允许用户点击地图来添加新的标记。

更新你的 app.js 文件如下：

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap 贡献者'
}).addTo(map);

$scope.markers = [];

map.on('click', function(e) {
var marker = L.marker(e.latlng).addTo(map);
$scope.markers.push(marker);
$scope.$apply();
});

$scope.removeMarkers = function() {
$scope.markers.forEach(function(marker) {
map.removeLayer(marker);
});
$scope.markers = [];
};
});

现在，更新你的 index.html 文件以包括一个用于移除标记的按钮：

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">移除所有标记</button>
<script src="app.js"></script>
</body>

让我们分解一下我们添加的内容：

  1. 我们创建了一个数组 $scope.markers 来跟踪我们所有的标记。
  2. 我们为我们的地图添加了一个事件监听器，每当用户点击地图时，都会创建一个新的标记。
  3. 我们创建了一个 removeMarkers 函数，它会从地图上移除所有标记并清空我们的标记数组。
  4. 我们在 HTML 中添加了一个按钮，当点击时，会调用 removeMarkers 函数。

结论

恭喜你！你刚刚使用 AngularJS 和 Leaflet 构建了你的第一个交互式地图应用。你已经学会了如何设置基本地图、添加标记，甚至实现了用户交互。

记住，这只是一个开始。网页地图的世界是广阔和令人兴奋的，有着无尽的定制和功能添加的可能性。继续探索，继续编码，最重要的是，享受乐趣！

下面是一个我们使用的主要方法的总结表：

方法 描述
L.map() 在指定的 HTML 元素上创建一个地图
setView() 设置地图的视角，包括中心和缩放级别
L.tileLayer() 向地图添加一个瓦片图层
L.marker() 向地图添加一个标记
bindPopup() 将一个弹窗绑定到一个标记上
openPopup() 为一个标记打开弹窗
on() 向地图添加一个事件监听器
addTo() 向地图添加一个对象
removeLayer() 从地图中移除一个图层

快乐的地图制作，未来的制图师们！

Credits: Image by storyset

上一教程:
AngularJS - 计时器应用程序
下一教程:
AngularJS - Last.fm 应用程序