如何在离子科尔多瓦使用谷歌地图?

时间:2015-12-11 16:03:44

标签: angularjs cordova google-maps geolocation ionic-framework

我使用此命令将Google地图插件添加到我的项目中:

12-11 10:57:56.089: D/gralloc_goldfish(1930): Emulator without GPU emulation detected.
12-11 10:57:58.879: I/HelloService(1930): Service onCreate
12-11 10:57:59.009: I/HelloService(1930): Service onStartCommand
12-11 10:58:00.059: I/HelloService(1930): Service running
12-11 10:58:00.099: I/HelloService(1930): Service onDestroy
12-11 10:58:02.089: D/dalvikvm(1930): GC_FOR_ALLOC freed 207K, 9% free 2911K/3188K, paused 47ms, total 47ms
12-11 10:58:02.089: I/dalvikvm-heap(1930): Grow heap (frag case) to 4.290MB for 1451356-byte allocation
12-11 10:58:02.139: D/dalvikvm(1930): GC_FOR_ALLOC freed 1K, 7% free 4327K/4608K, paused 34ms, total 35ms
12-11 10:58:05.559: I/HelloService(1930): downlad compleated
12-11 10:58:05.559: D/AndroidRuntime(1930): Shutting down VM
12-11 10:58:05.559: W/dalvikvm(1930): threadid=1: thread exiting with uncaught exception (group=0xb4a41ba8)
12-11 10:58:05.599: E/AndroidRuntime(1930): FATAL EXCEPTION: main
12-11 10:58:05.599: E/AndroidRuntime(1930): Process: com.ibeacon.vapplicaspecials, PID: 1930
12-11 10:58:05.599: E/AndroidRuntime(1930): java.lang.NullPointerException
12-11 10:58:05.599: E/AndroidRuntime(1930):     at com.ibeacon.vapplicaspecials.MainActivity$1.onReceive(MainActivity.java:45)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at android.support.v4.content.LocalBroadcastManager.executePendingBroadcasts(LocalBroadcastManager.java:297)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at android.support.v4.content.LocalBroadcastManager.access$000(LocalBroadcastManager.java:46)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at android.support.v4.content.LocalBroadcastManager$1.handleMessage(LocalBroadcastManager.java:116)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at android.os.Handler.dispatchMessage(Handler.java:102)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at android.os.Looper.loop(Looper.java:136)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at android.app.ActivityThread.main(ActivityThread.java:5001)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at java.lang.reflect.Method.invokeNative(Native Method)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at java.lang.reflect.Method.invoke(Method.java:515)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
12-11 10:58:05.599: E/AndroidRuntime(1930):     at dalvik.system.NativeStart.main(Native Method)
12-11 11:02:28.179: I/Process(1930): Sending signal. PID: 1930 SIG: 9

在我使用本教程http://codepen.io/ionic/pen/uzngt之后,我在我的页面index.html中使用但是当我在其他页面中移动此代码时,此代码无法使用

页面中的

cordova plugin add cordova-plugin-geolocation

在页面carte.html

 <html ng-app="starter">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">


        ionic/angularjs js
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

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


        your app's js 
        <script src="js/app.js"></script>
        <script src="js/services.js"></script>

        <script src="js/Controllers/inscription.js"></script>
        <script src="js/Controllers/Categories.js"></script>
        <script src="js/Controllers/SousCategories.js"></script>
        <script src="js/Controllers/Evenement.js"></script>
        <script src="js/Controllers/RechercheEvent.js"></script>

        <script src="js/service/services.js"></script>

    google maps javascript
    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

  </head>
  <body ng-controller="carteController">
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Map</h1>
    </ion-header-bar>
    <ion-content>
      <div id="map" data-tap-disabled="true"></div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
  </body>
</html>

我的控制器app.js

<html ng-app="starter">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
        <title></title>

        <link href="../lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="/css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above -->
        <link href="/css/ionic.app.css" rel="stylesheet">


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

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


        <!-- your app's js  -->
        <script src="../js/app.js"></script>
         <script src="../js/services.js"></script>



    <!-- google maps javascript -->
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

  </head>
  <body ng-controller="carteController">
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Map</h1>
    </ion-header-bar>
    <ion-content>
      <div id="map" data-tap-disabled="true"></div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
  </body>
</html>

我的错误:

enter image description here

0 个答案:

没有答案