个人中心
gpt4 book ai didi

javascript - 无法让谷歌地图出现在 ionic 框架中

转载 作者：行者123 更新时间：2023-11-28 07:15:28 25 4
gpt4 key购买 nike

我正在尝试在 Ionic 应用程序中显示谷歌地图。我可以创建 map 对象，但似乎无法使其显示在应用程序页面中。结果是map.html 中没有可见的谷歌地图。 $scope.centerOnMe() 函数似乎也可以工作，但由于没有 map 可显示，因此毫无用处。

我使用 ionic sidemenu 作为我的项目的基础，并使用基于此存储库 ( 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);
    });
  };

})

ma​​p.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)函数记录了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...}

最佳答案

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

尝试添加 lodash.js在您的 Google Map API JavaScript 之前。它会有所帮助。 :)

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

关于javascript - 无法让谷歌地图出现在 ionic 框架中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30879043/

25 4 0
文章推荐： javascript - Angular 路由导致 IE 死循环
文章推荐： javascript - 如何将大量的HTML表单输入发送到Flask？
文章推荐： javascript - html表单输入javascript求和字段
文章推荐： javascript - 在 ui-router TemplateURL 中运行脚本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com