谷歌地图不能在选项卡上工作Ionic

我在Ionic项目上创建选项卡。当我从另一个URL选项卡访问Google地图时，它不起作用，但是当我直接访问它时，它可以正常工作。谷歌地图不能在选项卡上工作Ionic

2016-03-15 Sihem Hcine

检查这些帖子是否对您有用：http://stackoverflow.com/questions/34719011/config-angular-google-maps-with-ionic-framework/34722232#34722232，http：// stackoverflow .com/questions/34410064/google-maps-on-deviceready-problems/34411505＃34411505，http://stackoverflow.com/questions/34735180/google-maps-in-modal-not-showed-after-two-times -open-ionic/34743291＃34743291 – beaver

谢谢你:)）但他们都使用谷歌地图在普通的页面上，而不是在标签页中，我的问题是，当我从标签的URL访问其状态但是当我从另一个标签网址访问标签，然后移至Google地图标签时，无法显示，因此我没有错误信息！ –

不，有3个链接，第三个（http://stackoverflow.com/questions/34735180/google-maps-in-modal-not-showed-after-two-times-open-ionic/34743291#34743291）在第二个选项卡中有一个带有地图的CodePen示例... – beaver

首先离子部分：表示地图的选项卡：

离子调用refreshMap（）当用户选择的选项卡。 refreshMap（）是：

.controller('MainCtrl', function($scope) { 
    $scope.refreshMap = function() { 
     setTimeout(function() { 
      $scope.refreshMap_(); 
     }, 1); //Need to execute it this way because the DOM may not be ready yet 
    }; 

    $scope.refreshMap_ = function() { 
     var div = document.getElementById("map_canvas"); 
     reattachMap(map,div); 
    }; 
})

我实现reattachMap（）看Map.init（）方法：

function reattachMap(map,div) { 
    if (!isDom(div)) { 
     console.log("div is not dom"); 
     return map; 
    } else { 
     map.set("div", div); 

     while(div.parentNode) { 
     div.style.backgroundColor = 'rgba(0,0,0,0)'; 
     div = div.parentNode; 
     } 

     return map; 
    } 
} 

function isDom(element) { 
    return !!element && 
    typeof element === "object" && 
    "getBoundingClientRect" in element; 
}

而且仅此而已，现在，当用户切换回地图标签，它会在那里。

请参阅此。（https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/256/#issuecomment-59784091）

来源

2016-03-22 08:46:26 adjuremods

谷歌地图不能在选项卡上工作Ionic

回答

相关问题