Question

我正在尝试在Ionic应用中显示谷歌地图。我可以创建地图对象，但我似乎无法让它显示在应用程序页面中。结果是map.html中没有可见的谷歌地图。 $ scope.centerOnMe（）函数似乎也可以工作，但是没有要显示的地图，它没用。

我使用离子侧面菜单作为我项目的基础，并使用基于此存储库（https://github.com/driftyco/ionic-starter-maps）的代码在其中一个页面中创建谷歌地图。

这是我的代码：的的index.html

    <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>


    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="js/itemCard.js"></script>
    <!--<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>-->


    <!-- GOOGLE MAPS -->
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=[myKey]0Q&sensor=true"></script>
  </head>

  <body ng-app="starter">

    <ion-nav-view></ion-nav-view>
  </body>
</html>

JS / directives.js

angular.module('starter.directives', [])

.directive('map', function() {
  return {
    restrict: 'E',
    scope: {
      onCreate: '&'
    },
    link: function ($scope, $element, $attr) {
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(43.07493, -89.381388),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($element[0], mapOptions);

        $scope.onCreate({map: map});

        // Stop the side bar from dragging when mousedown/tapdown on the map
        google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
          e.preventDefault();
          return false;
        });
      }

      if (document.readyState === "complete") {
        initialize();
      } else {
        google.maps.event.addDomListener(window, 'load', initialize);
      }
    }
  }
});

和 controllers.js

    .controller('MapCtrl', function($scope, $ionicLoading, $compile, StoreService) {

  $scope.mapCreated = function(map) {
    console.log("Creating");
    $scope.map = map;
    console.log($scope.map);
  };

  $scope.centerOnMe = function () {
    console.log("Centering");
    if (!$scope.map) {

      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function (pos) {
      console.log('Got pos', pos);
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function (error) {
      alert('Unable to get location: ' + error.message);
    });
  };

})

map.html

<ion-view view-title="Map">

  <ion-content>
    <!--<div id="map" data-tap-disabled="true">Map</div>-->
    <map on-create="mapCreated(map)"></map>
    <div>
      <button class="button button-clear" ng-click="alert()">X</button>
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </div>

  </ion-content>
</ion-view>

最后 style.css

#map {
width: 100%;
height: 100%;
margin: 100px;

}

这里应该注意的是，在controller.js中，$ scope.mapcreated（map）函数记录了地图对象。（您不需要查看整个对象，但它显示该对象已创建，并且可以添加到页面中）以下是结果：

__e3_

    Object { resize={...},  zoom_changed={...},  streetview_changed={...},  more...}
__gm

    Oi { ca=map,  Sf=tg,  S=rg,  more...}
center

    rf { A=43.07493,  F=-89.38138800000002,  toString=function(),  more...}
controls

    [undefined, rg { j=[0],  gm_accessors_={...},  length=0,  more...}, rg { j=[0],  gm_accessors_={...},  length=0,  more...}, 11 more...]
data

    ei { gm_accessors_={...},  map=Sk,  gm_bindings_={...},  more...}
features

    T { gm_accessors_={...},  gm_bindings_={...},  get=function(),  more...}
gm_accessors_

    Object { bounds={...},  projection={...},  svClient={...},  more...}
gm_bindings_

    Object { reportErrorControl={...},  center={...},  zoom={...},  more...}
mapTypeId

    "roadmap"
mapTypes

    jh { gm_accessors_={...},  roadmap=GE,  gm_bindings_={...},  more...}
mapUrl

    "https://maps.google.com/...S&gl=US&mapclient=apiv3"
overlayMapTypes

    rg { j=[0],  gm_accessors_={...},  length=0,  more...}
streetView

    Mi { __gm=T,  controls=[14],  A=false,  more...}
tilt

    0
tosUrl

    "https://www.google.com/i...US/help/terms_maps.html"
zoom

    16
constructor

    Sk(a, b)
addListener

    function(a, b)
bindTo

    function(a, b, c, d)
changed

    function()
fitBounds

    function(a)
get

    function(a)
getBounds

    function()
getCenter

    function()
getDiv

    function()
getHeading

    function()
getMapTypeId

    function()
getProjection

    function()
getStreetView

    function()
getTilt

    function()
getZoom

    function()
notify

    function(a)
panBy

    function(a, b)
panTo

    function(a)
panToBounds

    function(a)
set

    function(a, b)
setCenter

    function(c)
setHeading

    function(c)
setMapTypeId

    function(c)
setOptions

    function(a)
setStreetView

    function(c)
setTilt

    function(c)
setValues

    function(a)
setZoom

    function(c)
streetView_changed

    function()
unbind

    function(a)
unbindAll

    function()
__proto__

    Sk { constructor=Sk(),  streetView_changed=function(),  getDiv=function(),  more...}

Answer 1

您的控制台中是否有错误或错误？

尝试在Google Map API JavaScript之前添加lodash.js。它可以帮助。：）

<script src="lib/lodash.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=[myKey]0Q&sensor=true"></script>

Answer 2

你正在尝试这个风格 <map on-create="mapCreated(map)"></map>

用这个

#map {
  width: 100%;
  height: 100%;
  margin: 100px;
}

我愿意赌钱没有id #map的元素。

请尝试使用此样式：

map {
  width: 100%;
  height: 100%;
  margin: 100px;
}

它可能看起来很小，但除非你有一个设置高度的样式，否则该元素将默认为零高度。

无法让google地图显示在离子框架中

2 个答案: