Question

我正在开发Ionic + AngularJS + Cordova移动应用程序。我在我的应用程序中使用选项卡。在其中一个标签中，我正在向用户显示地图。我正在使用谷歌地图V3 api。我正在将地图分配给div元素。

var map = null
var mapOptions = {
      center: {lat: sourceLatitude, lng: sourceLongitude},
      zoom: 17,
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

我存储用户的标记。到目前为止一切正常。我能够存储标记信息并在tab-one中显示地图。

现在，在另一个标签中，即tab-two。我显示用户存储的标记。因此，当用户单击任何一个存储的标记时，它应该返回到选项卡一，并且应该显示其上显示所选标记的地图。（我使用angularJS ui-router来处理不同的状态转换）

这是我面临问题的地方。当我从tab-back返回tab-one时，我得到一张空白地图。我无法看到地图正在显示。我知道转换正确发生，因为我已经为此记录并且其他ui元素改变了。这只是没有出现的地图。

我阅读了SO和其他来源，我看到人们推荐了以下内容：

google.maps.event.trigger(map, 'resize');

我已将上述语句放在我的angularJS控制器中，这样当它从tab-2移动到tab-one时，它会尝试调整大小或刷新地图。我在控制台中收到以下错误。

Error: a is undefined
_.C.hasListeners@http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places:93:707
_.C.trigger@http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places:94:32

我读到某处变量map应该是全局的。因此我尝试将地图放在$ rootScope上，而不是使用var

$rootScope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

但没有运气:(在这两种情况下。

以前有人见过这个问题吗？任何帮助或指示将不胜感激。在此先感谢您的帮助。

此致 V

Answer 1

我有同样的问题，我的解决方案：

＆＃13;

function createGrid(number,from,to) {
$("#grid").kendoGrid({
    dataSource: {
        type: "json",
        serverPaging: false,
        pageSize: 10,
        transport: { //With the transform i can connect data from ajax 
            read: {
                url: "../Home/QuerySelected",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: { id: number, from: from, to: to } // I can pass parameter
            },
            parameterMap: function (options) {
                return JSON.stringify(options);
            }
        },
        schema: { // Please be carefull because if you forget schema grid can give different errors. You need to write schema Data and Total and put right place in datasource
            data: "Data",
            total: "Total"
        }
    },
    resizable: true,
    pageable: {
        refresh: true
    },
    sortable: true,
    filterable: {
        extra: false,
        operators: {
            string: {
                startswith: "Starts with",
                contains: "Contains"
            }
        }
    },
    columns: [
        { field: "Value1", title: myData.Data[0].Series1, hidden: myData.Data[0].Series1 == null ? true : false },
        { field: "Value2", title: myData.Data[0].Series2, hidden: myData.Data[0].Series2 == null ? true : false },
        { field: "Value3", title: myData.Data[0].Series3, hidden: myData.Data[0].Series3 == null ? true : false },
        { field: "Value4", title: myData.Data[0].Series4, hidden: myData.Data[0].Series4 == null ? true : false },
        { field: "Value5", title: myData.Data[0].Series5, hidden: myData.Data[0].Series5 == null ? true : false }
    ]
});

$(':contains("No Data in this interval!!")').each(function () {
    $("#chart-" + number).html($("#chart-" + number).html().split("No Data in this interval!!").join(""));
});

＆＃13;

为我工作：）

Answer 2

我终于在与它斗争了5天之后设法解决了我的问题。认为在这里发布我的解决方案也是一件好事，万一有人发现自己处于相同的情况。

我发现在第一次创建和初始化控制器时，地图正确呈现。我在两个标签之间切换时使用了相同的控制器，显示地图没有问题。

只有当我在tab-two中单击存储的标记时，才会创建一个新的控制器，它在渲染地图时遇到问题。我在按钮点击时更改状态可能是创建控制器的新实例的原因。

所以，我所做的是将我的地图控制器应用于index.html的主体

<body ng-app="storeMarkerApp" ng-controller="MapController">

这样在两个选项卡中使用相同的控制器，当我单击存储的标记按钮时。这解决了这个问题。地图正在正确渲染。

希望这有帮助。

此致 V

在ionic / angularJS应用程序中切换选项卡时，Google地图显示为空白

2 个答案: