javascript - 谷歌地图未在 ionic 框架上显示-6ren

javascript - 谷歌地图未在 ionic 框架上显示

转载作者：行者123 更新时间：2023-12-03 10:11:04

我是 ionic 的初学者，并且搞乱了谷歌地图。我想在屏幕上显示 Google map ，但它没有出现在屏幕上，尽管我认为<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;
    });
});