Question

我跑了一点点错误。我正在制作角度和温度的移动应用程序。我在加载谷歌地图时遇到麻烦，然后转到某个页面，然后回到那个谷歌地图。

我的HTML是：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>FM App</title>  

<link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">  
<link rel="stylesheet" href="styles/app.css"/>

<script src="lib/onsen/js/angular/angular.js"></script>    
<script src="lib/onsen/js/onsenui.js"></script>    
<script src="components/loader.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
<script src="scripts/controller.js"></script>
<script src="scripts/directives/shape.js"></script>



<script>
    ons.ready(function() {
    ons.createDialog('dialog.html').then(function(dialog) {
        dialog.show();
    });
})
</script>


<style></style>
</head>

<body ng-controller="appController">    
<ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" var="menu" swipeable="false"></ons-sliding-menu>

<ons-template id="page1.html">
    <ons-page>
    <ons-navigator title="Navigator" var="myNavigator">
    <div class="bg">
     <div class="logo"></div>
        <ul class="list list--noborder">
            <li class="list__item list--inset__item list__item--chevron" onclick="myNavigator.pushPage('especialidades.html', { animation : 'slide' } )">
                Directorio Médico
            </li>
            <li class="list__item list--inset__item list__item--chevron" onclick="myNavigator.pushPage('cubiertas.html', { animation : 'slide' } )">
                Conoce nuestras Cubiertas
            </li>
            <li class="list__item list--inset__item list__item--chevron" onclick="myNavigator.pushPage('oficinas.html', { animation : 'slide' } )">
                Contactanos
            </li>
            <li class="list__item list--inset__item list__item--chevron" onclick="myNavigator.pushPage('localizanos.html', { animation : 'slide' } )">
                Nuestras Facilidades
            </li>
        </ul>
        <button class="button button--large--quiet" onclick="myNavigator.pushPage('politica.html', { animation : 'slide' } )"><div style="color:white;font-size: small;">Política de Privacidad</div></button>
    </div>
    </ons-navigator>
</ons-page>

<ons-template id="localizanos.html">
<ons-page>
    <ons-toolbar>
        <div class="right"></div>
        <div class="center">Localizanos</div>
        <div class="left">
            <ons-toolbar-button ng-click="menu.toggleMenu()">
                <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
        </div>
    </ons-toolbar>
        <ons-tabbar position="top">
            <ons-tab page="hospitales.html" icon="fa-hospital-o" label="Hospitales" active="true"></ons-tab>
            <ons-tab page="clinicas.html" icon="fa-building" label="Clínicas"></ons-tab>
        </ons-tabbar>
</ons-page>
</ons-template>

<ons-template id="hospitales.html">
<ons-page ng-controller="GpsController">
    <div id ="map"></div>

        <ons-list style="margin-bottop: 50px;" ng-repeat="marker in markers | orderBy : 'title'">
            <ons-list-item href="#" icon="fa-map-marker" size="20px" style="padding-right:10px;" ng-click="openInfoWindow($event, marker)">{{marker.title}}</ons-list-item>

        </ons-list>
    </ons-page>
</ons-template>
</body>
</html>

脚本是：

(function() {
var app = angular.module('myApp', ['onsen']);

//Sliding menu controller, swiping management
app.controller('SlidingMenuController', function($scope){

    $scope.checkSlidingMenuStatus = function(){

        $scope.slidingMenu.on('postclose', function(){
            $scope.slidingMenu.setSwipeable(false);
        });
        $scope.slidingMenu.on('postopen', function(){
            $scope.slidingMenu.setSwipeable(true);
        });
    };

    $scope.checkSlidingMenuStatus();
});

app.controller('appController', function($scope){ });


//Map controller
app.controller('GpsController', function($scope, $timeout){

    $scope.map;
    $scope.markers = [];
    $scope.markerId = 1;



    //Map initialization  
    $timeout(function(){

        var latlng = new google.maps.LatLng(18.3779806, -66.1141119);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        $scope.map = new google.maps.Map(document.getElementById("map"), myOptions); 

        function initiate_geolocation() {  
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
        }  

        function onSuccess(position){  
            var myLat = position.coords.latitude;
            var myLong = position.coords.longitude;
            var myPos = (myLat, myLong);
            $scope.map.setCenter(new google.maps.LatLng(myLat, myLong));
        }
        var onError = function(message){
        alert("Gps not able to get the current position.");
        };
        initiate_geolocation();


//////////////////////////////////////////////////////////////  
           ////////////Markers////////////
//////////////////////////////////////////////////////////////  

        var cities = [


        {city : 'Hospital Pavia, Santurce',desc : 'This city is live!',lat : 18.4446653,long : -66.069324},
        {city : 'Hospital Pavia, Hato Rey',desc : 'This city is live!',lat : 18.4191712,long : -66.0560574},
        {city : 'Hospital San Francisco',desc : 'This city is live!',lat : 18.3990387,long : -66.0388791},
        {city : 'Hospital Metropolitano, Guaynabo',desc : 'San Juan, Puerto Rico',lat : 18.3895923,long : -66.0982454,},
        {city : 'Hospital Metropolitano, San German',desc : '8 Cll Javilla ,San Germán, 00683, Puerto Rico',lat : 18.0825936,long : -67.0403575},
        {city : 'Hospital Dr.Cayetano Coll y Toste',desc : 'Km. 1, PR-129, Arecibo, 00614, Puerto Rico',lat : 18.4671021,long : -66.7312367},
        {city : 'Hospital Metropolitano de la Montaña',desc : 'Cll I Martinez Gonzalez, Utuado, 00641, Puerto Rico',lat : 18.2677037,long : -66.7014286},
        {city : 'Hospital Metropolitano Dr. Tito Mattei',desc : 'PR-128, Yauco, 00698, Puerto Rico',lat : 18.0314288,long : -66.8576377},
        {city : 'Hospital Dr. Perea',desc : '23 Calle Doctor Basora, Mayagüez, 00680',lat : 18.2026803,long : -67.1403846},
        {city : 'Hospital Metropolitano Dr. Pila',desc : 'Avenida Las Américas, Ponce, Puerto Rico',lat : 18.2026803,long : -67.1403846},
        {city : 'Hospital Metropolitano Dr.Susoni',desc : 'Calle Palma, Arecibo, Puerto Rico',lat : 18.472588,long : -66.7163908},
        {city : 'Hospital Psiquíatrico Metropolitano, Cabo Rojo',desc : 'This city is live!',lat : 18.0815206,long : -67.1457016},

        ];

    $scope.markers = [];
            var infoWindow = new google.maps.InfoWindow();
            var createMarker = function (info){
            var marker = new google.maps.Marker({
                map: $scope.map,
                position: new google.maps.LatLng(info.lat, info.long),
                title: info.city
                });



            marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

            google.maps.event.addListener(marker, 'click', function(){
                infoWindow.setContent('<h4>' + marker.title + '</h4>' + marker.content);
                infoWindow.open($scope.map, marker);
                });

        $scope.markers.push(marker);

        }  

        for (i = 0; i < cities.length; i++){
            createMarker(cities[i]);
        }

        $scope.openInfoWindow = function(e, selectedMarker){
            e.preventDefault();
            google.maps.event.trigger(selectedMarker, 'click');
        }

//////////////////////////////////////////////////////////////////////////////////////////////////////////

        $scope.overlay = new google.maps.OverlayView();
        $scope.overlay.draw = function() {}; // empty function required
        $scope.getRadius = function(num) {return Math.sqrt(num) * 100;
    }
        $scope.overlay.setMap($scope.map);
        $scope.element = document.getElementById('map');
        $scope.hammertime = Hammer($scope.element).on("hold", function(event) {
            $scope.addOnClick(event);
        });



    },100);


});
})();

它正在工作但是当我转到另一个页面并返回到地图时它没有加载。 div显示为空白和＆＃34; Uncaught TypeError：无法读取属性＆＃39; subscribe＆＃39;未定义＆＃34;在日志上显示。

任何领导都会很高兴。

-ivan

Answer 1

经过几天撕裂我的大脑后，我发现问题不在我分享的代码而是自己的菜单。

<ons-template id="menu.html">
  <ons-page modifier="menu-page">
    <ons-toolbar modifier="transparent">
      <div class="right">
        <ons-toolbar-button class="menu-close" ng-click="slidingMenu.close()">
          </ons-icon>Close
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <ons-list class="menu-list">
      <ons-list-item class="menu-item" onclick="slidingMenu.setMainPage('especialidades.html', {closeMenu: true})">
      <ons-icon icon="ion-medkit" size="20px" style="padding-right:10px;"></ons-icon>
        Especialidades
      </ons-list-item>
      <ons-list-item class="menu-item" onclick="slidingMenu.setMainPage('busqueda.html', {closeMenu: true})">
        <ons-icon icon="fa fa-search" size="20px" style="padding-right:10px;"></ons-icon>
       Busqueda
      </ons-list-item>
        <ons-list-item class="menu-item" onclick="slidingMenu.setMainPage('cubiertas.html', {closeMenu: true})">
        <ons-icon icon="fa fa-book" size="20px" style="padding-right:10px;"></ons-icon>
       Cubiertas
      </ons-list-item>
      <ons-list-item class="menu-item" onclick="slidingMenu.setMainPage('oficinas.html', {closeMenu: true})">
        <ons-icon icon="ion-person-stalker" size="20px" style="padding-right:10px;"></ons-icon>
       Contactanos
      </ons-list-item>
      <ons-list-item class="menu-item" onclick="slidingMenu.setMainPage('localizanos.html', {closeMenu: true})">
        <ons-icon icon="fa-map-marker" size="20px" style="padding-right:10px;"></ons-icon>
       Nuestras Facilidades
      </ons-list-item>


    </ons-list><br>

    <ons-list class="bottom-menu-list">
        <ons-list-item class="bottom-menu-item" onclick="slidingMenu.setMainPage('politica.html', {closeMenu: true})">
        Política de Privacidad
      </ons-list-item>
    </ons-list>
   </ons-page>
</ons-template>

我没有使用我为该特定控制器创建的功能。我还在使用onsenUi模板上设置的功能

当我通过我的应用页面返回和转发时，Google地图无法显示

1 个答案: