Cordova 地图没有'；t出现在带有phonegap谷歌地图插件的ionic中

我正在用Ionic框架和AngularJS开发一个Phonegap应用程序，我必须在不同的页面中放置两个地图。 这是一扇空窗户

在app.js中

.run(function () {
 ionic.Platform.ready(function () {
                var div = document.getElementById("map_canvas1");
        alert('deviceready');

        alert(window.plugin);

      //  map = window.plugin.google.maps.Map.getMap(div);
         if (window.plugin) {
            alert(1);
            map = window.plugin.google.maps.Map.getMap(div);
        }

      });
    })

我的html页面

<div class="modal">
   <ion-header-bar class="bar-positive">
      <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
      <h1 class="title">Géolocalisation</h1>

     </ion-header-bar>
   <ion-content>
    <div style="width:90%;margin-left:10%;height:500px" id="map_canvas1"></div>
   </ion-content>
 </div>

---

谢谢你使用我的插件。 虽然我不熟悉离子框架，但很多人都使用它。 所以它应该会起作用

不幸的是，地图插件不支持多个地图。 因此，您需要映射.remove（），然后再次映射.getMap（）

许多人询问关于问题清单上离子的问题。 你可能会发现有用的信息。

此外，爱奥尼亚框架的论坛页面可能对您的问题有所帮助。

---

这是一个工作解决方案，位于地图页控制器中

.controller('GeoCtrl', ['$scope', 'FlightDataService','Search','Distance','$http','$ionicLoading','$state', function($scope, FlightDataService,Search,Distance,$http,$ionicLoading,$state) {

var div = document.getElementById("map_canvas"); 
const GORYOKAKU_JAPAN = new plugin.google.maps.LatLng(41.796875,140.757007);
if(plugin.google)
map = plugin.google.maps.Map.getMap(div,{
'backgroundColor': 'white',
'mapType': plugin.google.maps.MapTypeId.HYBRID,
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
 },
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true
 },
'camera': {
'latLng': GORYOKAKU_JAPAN,
'tilt': 30,
'zoom': 15,
'bearing': 50
 }
 });


 map.refreshLayout();

 }]);

和在应用程序控制器中

 .controller('AppCtrl', function($scope, $ionicModal, $timeout,$state,$ionicSideMenuDelegate) {
 $('.menu-left').css('display','none'); 
 $scope.go = function(route){
 display = 'none';
 $('.menu-left').css('display','none');

 $state.go('app.'+route);   
 };

 $scope.toggleLeftSideMenu = function() {
 $ionicSideMenuDelegate.toggleLeft();
 alert(display);
 if(display == 'block')
    display ='none';
    else
    display ='block';
 $('.menu-left').css('display',display);

 }; 
 }); 

最后在菜单页面中单击添加ng click=“go（‘地理定位’）”

---

我想你的问题是关于sdk你确定要放弃这个说明吗

好的，这是我的方式

我的地图html，

<ion-view view-title="Map" ng-controller="MapControl">
  <ion-content>
      <div class="card">
          <div style="width:100%;height:400px" id="map_canvas"></div>
      </div>
  </ion-content>
</ion-view>

.controller('MapControl', function($scope) {

    var div = document.getElementById("map_canvas");
    map = plugin.google.maps.Map.getMap(div);
})

祝你好运。

这对我很有用：

HTML:

<ion-view view-title="Map" ng-open="mapCTRL.init()">
<ion-content>   
        <div class="card" id="map" data-tap-disabled="true"></div>
</ion-content>
 <ion-footer-bar class="bar-assertive">
        <a ng-click="mapCTRL.test()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
        </ion-view>

angular.module('maps', []).directive('myMap', function () {
return {
    restriction: 'E',
    templateUrl: 'templates/map.html',
    controller: function ($scope, $ionicLoading) {

        this.init = 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);

            $scope.map = map;
        };            
    },
    controllerAs: 'mapCTRL'
};
});

---

“找不到Google Play services资源。请检查项目配置以确保包含这些资源。”即使地图工作正常，也会始终输出错误消息。忽略它们。感谢您的回复，“插件无法跟随map div的位置”，您的意思是它没有包装在div中吗？map与浏览器的视图完全不同，这意味着它不是HTML元素。因此，map div中没有map。map插件会自动跟随页面滚动，但是如果您使用JavaScript和/或CSS更改map div，map插件将无法检测到它。因此，当我有map.showDialog（）时，需要调用

map.refreshLayout（）

；地图显示在整个页面中，创建后我在app.js中调用了map.refreshLayout（），但它没有显示，因此如何将地图放入页面中，我还应该在页面链接事件中调用map.refreshLayout（），单击？map.showDialog（）将地图显示为全屏，因此您不需要调用

map.refreshLayout（）

。要在div中设置映射，

map.getMap（div）

或

map.setDiv（div）

。如果您以全屏方式打开地图，则需要在

map.setDiv（div）

之前调用

map.closeDialog（）

，不，我不想以全屏方式打开，现在我解决了这个问题，谢谢，我在切换菜单时遇到问题，但我通过在单击菜单切换按钮时显示隐藏来修复它。谢谢。感谢您共享您的解决方案。单击切换按钮时此解决方案有效，但在左右滑动以隐藏/显示菜单时仍在搜索解决方案

<ion-view view-title="Map" ng-open="mapCTRL.init()">
<ion-content>   
        <div class="card" id="map" data-tap-disabled="true"></div>
</ion-content>
 <ion-footer-bar class="bar-assertive">
        <a ng-click="mapCTRL.test()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
        </ion-view>

angular.module('maps', []).directive('myMap', function () {
return {
    restriction: 'E',
    templateUrl: 'templates/map.html',
    controller: function ($scope, $ionicLoading) {

        this.init = 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);

            $scope.map = map;
        };            
    },
    controllerAs: 'mapCTRL'
};
});