Angularjs获取json在google地图中不起作用

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

angular.module('myApp', []).controller('MapController', function($scope, $http) {
    // 在这里处理地图和数据的逻辑
});

$http.get('data.json').then(function(response) {
    // 处理获取到的数据
    $scope.data = response.data;
});

<div ng-app="myApp" ng-controller="MapController">
    <div id="map"></div>
    <ul>
        <li ng-repeat="item in data">{{ item.name }}</li>
    </ul>
</div>

var map = new google.maps.Map(document.getElementById('map'), {
    // 设置地图选项
});

$scope.$watch('data', function(newData) {
    // 在数据发生变化时更新地图
    // 遍历数据并在地图上绘制标记或路径
}, true);