AngularJS 在百度地图中使用 marker 及多个 marker 绑定信息-JavaScript中文网-JavaScript教程资源分享门户

前言

近年来，前端开发越来越受到关注，特别是 MVVM 框架的出现，让前端开发变得更加高效和灵活。而 AngularJS 作为一种流行的 MVVM 框架，被广泛应用于前端开发中。

百度地图是一款功能强大的地图应用程序，它提供了丰富的 API，可以满足各种地图需求。在前端开发中，我们经常需要在百度地图中使用 Marker 来标记地图上的特定位置，同时还需要绑定 Marker 的信息窗口，以便用户可以查看更多的信息。

本文将介绍如何使用 AngularJS 在百度地图中添加 Marker，并绑定信息窗口。

准备工作

在使用 AngularJS 进行百度地图开发之前，需要进行一些准备工作。

注册百度地图开发者账号

首先需要在百度地图开发者平台注册一个账号，并申请一个开发者密钥。开发者密钥用于访问百度地图 API，是使用百度地图 API 的前提。

下载百度地图 API

百度地图提供了丰富的 API，可以在百度地图开发者平台下载到最新版本。

在 AngularJS 中使用百度地图

在 AngularJS 中使用百度地图，需要遵循以下步骤：

在 HTML 文件中引入百度地图 API 和 AngularJS；
创建地图容器，并设置地图中心点和缩放级别；
创建 Marker，并设置 Marker 的位置和属性；
绑定 Marker 的信息窗口，并设置弹窗内容。

引入百度地图 API 和 AngularJS

在 HTML 文件中引入百度地图 API 和 AngularJS：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=开发者密钥"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>

其中 开发者密钥 需要替换成自己在百度地图开发者平台申请的密钥。

创建地图容器

在 HTML 文件中创建地图容器：

<div id="map" style="width: 100%; height: 400px;"></div>

在 JavaScript 文件中创建地图，并设置地图中心点和缩放级别：

var map = new BMap.Map("map");    // 创建地图实例
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 15);   // 初始化地图，设置中心点坐标和缩放级别

创建 Marker

在 JavaScript 文件中创建 Marker，并设置 Marker 的位置和属性：

var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中

绑定 Marker 的信息窗口

在 JavaScript 文件中绑定 Marker 的信息窗口，并设置弹窗内容：

var infoWindow = new BMap.InfoWindow("这是 Marker 的信息窗口内容"); // 创建信息窗口对象
marker.addEventListener("click", function(){   // 点击 Marker 时，显示信息窗口
   this.openInfoWindow(infoWindow);
});

处理多个 Marker

如果有多个 Marker，可以使用循环来处理：

var points = [
    new BMap.Point(116.404, 39.915),
    new BMap.Point(116.347, 39.937),
    new BMap.Point(116.423, 39.987)
];
for (var i = 0; i < points.length; i++) {
    var marker = new BMap.Marker(points[i]);   // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
    var infoWindow = new BMap.InfoWindow("这是 Marker 的信息窗口内容"); // 创建信息窗口对象
    marker.addEventListener("click", function(){   // 点击 Marker 时，显示信息窗口
        this.openInfoWindow(infoWindow);
    });
}

示例代码

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用 AngularJS 在百度地图中使用 Marker 及多个 Marker 绑定信息</title>
    <style type="text/css">
        #map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body ng-app="">
    <h1>使用 AngularJS 在百度地图中使用 Marker 及多个 Marker 绑定信息</h1>
    <div id="map"></div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=开发者密钥"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script type="text/javascript">
        var map = new BMap.Map("map");    // 创建地图实例
        var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
        map.centerAndZoom(point, 15);   // 初始化地图，设置中心点坐标和缩放级别

        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        var infoWindow = new BMap.InfoWindow("这是 Marker 的信息窗口内容"); // 创建信息窗口对象
        marker.addEventListener("click", function(){   // 点击 Marker 时，显示信息窗口
           this.openInfoWindow(infoWindow);
        });

        var points = [
            new BMap.Point(116.404, 39.915),
            new BMap.Point(116.347, 39.937),
            new BMap.Point(116.423, 39.987)
        ];
        for (var i = 0; i < points.length; i++) {
            var marker = new BMap.Marker(points[i]);   // 创建标注
            map.addOverlay(marker);                     // 将标注添加到地图中
            var infoWindow = new BMap.InfoWindow("这是 Marker 的信息窗口内容"); // 创建信息窗口对象
            marker.addEventListener("click", function(){   // 点击 Marker 时，显示信息窗口
                this.openInfoWindow(infoWindow);
            });
        }
    </script>
</body>
</html>

总结

本文介绍了如何使用 AngularJS 在百度地图中添加 Marker，并绑定信息窗口。通过学习本文，你可以了解到：

如何在 HTML 文件中引入百度地图 API 和 AngularJS；
如何创建地图容器，并设置地图中心点和缩放级别；
如何创建 Marker，并设置 Marker 的位置和属性；
如何绑定 Marker 的信息窗口，并设置弹窗内容；
如何处理多个 Marker。

希望通过本文的学习，能够帮助你更好地使用 AngularJS 进行百度地图开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a78aaaadd4f0e0ff0ad5e6

AngularJS 在百度地图中使用 marker 及多个 marker 绑定信息

前言