0

我编写了 AngularJS 应用程序，它显示了从 JSON 对象获得的特定坐标的 Google、Yandex 和 Gis 地图。JSON 可能包含 [0...n] 个对象。它适用于 Google Maps API，但不适用于 Yandex/Gis Maps API。

Yandex 地图：

// DOESN'T WORK
$scope.yandexMaps = function (city) {
    ymaps.ready(init);
    function init() {
        $scope.mapContainer = document.createElement('div');
        $scope.mapContainer.className = 'mapCon';
        $scope.yandexMap = new ymaps.Map($scope.mapContainer, {
            center: [city.lat, city.lng],
            zoom: 12
        });

        $scope.placemark = new ymaps.Placemark([city.lat, city.lng]);
        $scope.yandexMap.geoObjects.add($scope.placemark);
        return $scope.mapContainer; //I NEED TO GET IT !
    }
    //BUT I NEED TO GET IT THERE !
};

地理信息系统地图：

// DOESN'T WORK
$scope.gisMaps = function (city) {
    DG.then(init);
    function init() {
        $scope.mapContainer = document.createElement('div');
        $scope.mapContainer.className = 'mapCon';

        $scope.gisMap = DG.map($scope.mapContainer, {
            center: [city.lat, city.lng],
            zoom: 13
        });

        DG.marker([city.lat, city.lng]).addTo($scope.gisMap);
        return $scope.mapContainer; //I NEED TO GET IT !
    }
    //BUT I NEED TO GET IT THERE !
};

问题在于，ymaps.ready(init);只有DG.then(init);在检查准备好的地图状态后才调用 init() 函数。而且我不能$scope.mapContainer在这两种情况下返回，因为它们在嵌套函数中。

我尝试在 init() 函数上方创建全局变量并分配给 this $scope.mapContainer，但是当我在 init() 函数下方的父级中返回此全局值时，它不可见。它仅在嵌套函数中可见。

您可以在这里看到工作的 JSFiddle：https
://jsfiddle.net/oxpgkLhj/2/ 请打开控制台查看错误

如果您在代码末尾评论这部分：

        //adding yandex map to common container
        $scope.yandexMap = $scope.yandexMap(value);
        $scope.yandexMap.id = "yandexMapContainer" + i;
        angular.element($scope.container).append($scope.yandexMap);

和这个：

        //adding gis map to common container
        $scope.gisMap = $scope.gisMaps(value);
        $scope.gisMap.id = "gisMapContainer" + i;
        angular.element($scope.container).append($scope.gisMap);

你会看到完美的谷歌地图。我想看到 Yandex 和 Gis 地图完全相同。请帮忙...

4

0 回答 0