Google 离子框架上未显示地图

Question

我是 ionic 的初学者，并且弄乱了 google 地图。我想在屏幕上显示 Google 地图，但它没有出现在屏幕上，尽管我认为 <div> 正在接收代码。帮助！！

编码为<body>

<body ng-controller="RoadwayControl">

<ion-side-menus>

    <!-- Centre Part -->
  <ion-side-menu-content>
    <ion-header-bar class="bar-dark">
      <button class="button button-icon" ng-click="leftMenuClick()">
        <i class="icon ion-navicon"></i>
      </button>
      <h1 class="title">Roadway Maps</h1>
      <button class="button button-icon" ng-click="rightMenuClick()">
        <i class="icon ion-navicon"></i>
      </button>
    </ion-header-bar>

      <ion-content ng-controller="GoogleMapsControl">
        <div id="map" data-tap-disabled="true"></div>
      </ion-content>

  </ion-side-menu-content>


</ion-side-menus>

    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAt18I1Nft28M_AaxJjo6kGI-lcP2o5STk&sensor=true"></script>
    <script src="js/app.js"></script>
    <script src="cordova.js"></script>
  </body>

编码为js/app.js

var roadwayApp=angular.module("roadwayNepal",['ionic'])


roadwayApp.factory("RoadwayClass",function(){
  return{
    routes: [],
  };
});


roadwayApp.factory("GoogleMaps",function(){
  return{

  };
});

roadwayApp.controller("RoadwayControl",function($scope,$ionicSideMenuDelegate){
  $scope.allMenus= [
      {"title":"About"},
      {"title":"Settings"},
    ];

  $scope.leftMenuClick=function(){
    $ionicSideMenuDelegate.toggleLeft();
  };


  $scope.activeMenu=null;

  $scope.rightMenuClick=function(){
    if(RoadwayClass.routes.length>0){
      //there are routes
      $ionicSideMenuDelegate.toggleRight();
    }else{
      console.log("empty list");
    }
  }


});


roadwayApp.controller("GoogleMapsControl",function($scope,$ionicLoading){
    google.maps.event.addDomListener(window, 'load', function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var myDiv=document.getElementById("map");
        var map = new google.maps.Map(myDiv, mapOptions);

        // navigator.geolocation.getCurrentPosition(function(pos) {
        //     map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        //     var myLocation = new google.maps.Marker({
        //         position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
        //         map: map,
        //         title: "My Location"
        //     });
        // });
        $scope.map = map;
    });
});

`

Answer 1

您正在 "sidemenu" 上添加地图，我认为这不正确。我假设 roadwayNepal 应该是你的 ng-app。

从一个空白项目开始（例如标签模板）

ionic strat myApp tabs

并逐步添加您的地图组件

Answer 2

使用 http://angular-ui.github.io/angular-google-maps/#!/ 在您的应用中使用 google 地图。您正在从不推荐的控制器中操纵 DOM。

你也可以查看这个 repo https://github.com/driftyco/ionic-starter-maps。

$ sudo npm install -g ionic cordova $ ionic start myApp maps

Google 离子框架上未显示地图

Google Maps not showing on ionic framework

javascript

google-maps

ionic-framework