AngularJS 动态加载地图示例

在本文中，我们将介绍如何在AngularJS中动态加载地图，并在定位数据加载后加载地图。我们使用Angular-Google-Map库来实现这个功能。

Angular-Google-Map介绍

Angular-Google-Map是一个用于在AngularJS应用程序中集成谷歌地图的强大库。它提供了一组指令和服务，让我们可以轻松地显示地图、标记和其他地图元素。

加载地图

要加载地图，我们需要在HTML文件中包含Angular-Google-Map库，并在AngularJS应用程序中注入相应的模块。下面是一个简单的例子：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.3.2/dist/angular-google-maps.min.js"></script>
</head>
<body>
<div ng-controller="MapController as mapCtrl">
    <ui-gmap-google-map center="mapCtrl.map.center" zoom="mapCtrl.map.zoom">
        <ui-gmap-markers models="mapCtrl.markers"></ui-gmap-markers>
    </ui-gmap-google-map>
</div>

<script>
angular.module('myApp', ['uiGmapgoogle-maps'])
    .controller('MapController', function() {
        var vm = this;
        vm.map = {
            center: {latitude: 51.505, longitude: -0.09},
            zoom: 8
        };
        vm.markers = [
            {
                id: 1,
                coords: {latitude: 51.505, longitude: -0.09},
                options: {icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'}
            },
            {
                id: 2,
                coords: {latitude: 51.51, longitude: -0.1},
                options: {icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'}
            }
        ];
    });
</script>
</body>
</html>

这是一个简单的AngularJS应用程序，其中包含了一个地图和两个标记。地图的中心点是纬度51.505，经度-0.09，缩放级别为8。标记使用不同的图标，并在地图上显示出来。

在定位数据加载后加载地图

要在定位数据加载后加载地图，我们可以使用AngularJS的$http服务来获取定位数据。一旦数据加载完毕，我们可以更新地图的中心点和标记。

angular.module('myApp', ['uiGmapgoogle-maps'])
    .controller('MapController', function( $http) { var vm = this; vm.map = { center: {}, zoom: 8 }; vm.markers = [];$ http.get('/api/position').then(function(response) {
            var positionData = response.data;
            vm.map.center = {latitude: positionData.lat, longitude: positionData.lng};
            vm.markers.push({
                id: 1,
                coords: {latitude: positionData.lat, longitude: positionData.lng},
                options: {icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'}
            });
        });
    });

在这个例子中，我们在MapController控制器中注入了$http服务。当应用程序加载时，控制器会向服务器发送一个GET请求，获取位置数据。一旦数据加载完毕，我们更新地图的中心点和添加一个新的标记。