離子谷歌地圖縮放，移動和標記顯示問題

Question

我做了一個簡單的應用程序來顯示我當前位置和一個默認位置之間的地圖上的距離和路線。 我設法在屏幕上獲取地圖（在Galaxy S4上，但我不能在平板電腦Galaxy Tab 4上），但我有下一個問題：

我不能用兩個手指放大，在小部件+/-工作得很好但是當我嘗試用手指縮放時只得到一個沒有任何地圖的顏色div，如果我按小部件地圖上的+或 - 回來
我無法向任何方向移動地圖，它是靜態的。 我想用手指朝各個方向移動
我無法顯示標記，當我點擊標記時沒有發生任何事情。 當我在Ionic服務上點擊PC時效果很好。 我對標記的第二個問題是我應該點擊/點擊以顯示標記，我希望永遠在線
雖然我按兩次按鈕時顯示距離，但我無法在屏幕上寫入距離。

這是我的代碼，任何人都可以幫助我嗎？ 謝謝。

的index.html

    <!DOCTYPE html>
    <html>
      <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 *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
        <title></title>

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

      </head>
      <body ng-app="inception">

        <ion-nav-view>
          <ion-header-bar class="bar bar-header bar-calm">
            <h1 class="title text-center">Test</h1>
          </ion-header-bar>
          <ion-content class="has-header">
           <div class = "row colors-back">
            <div class = "col col-100">

             <div class="row" ng-if="locCtr.showRoute">
                <div class="col-100 text-center">Distance: {{locCtr.showDistance}}</div>
            </div>
            <div id="map" draggable="true"></div>
              </div>
           </div>
         </ion-content>

        </ion-nav-view>

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

        <script src="lib/ionic-material/dist/ionic.material.min.js"></script>
        <script src="lib/ngCordova/dist/ng-cordova.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVYeH02dc5EyoYaqpYSFsogSlkOx2S2o4&sensor=true" async defer></script>

        <script src="cordova.js"></script>

        <script src="app/application.js"></script>
        <script src="app/controllers/mainController.js"></script>
        <script src="app/controllers/locationController.js"></script>

      </body>
    </html>

調節器

(function() {
    'use strict';

    angular
        .module('inception')
        .controller('locationController', locationController);

    locationController.$inject=['$cordovaGeolocation'];

    function locationController($cordovaGeolocation) {

        var vm = this;
        vm.getRoute = getRoute;

        function getRoute() {
            vm.showData = false;
            vm.route = {};
            var options = {timeout: 10000, enableHighAccuracy: true};
            $cordovaGeolocation.getCurrentPosition(options).then(function(position){
                vm.latOrigin = position.coords.latitude;
                vm.longOrigin = position.coords.longitude;
                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer;
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 15,
                    center: {lat: vm.latOrigin, lng: vm.longOrigin}
                });

                directionsDisplay.setMap(map);
                directionsService.route({
                    origin: vm.latOrigin+","+vm.longOrigin,
                    destination: "44.008115,20.896861",
                    travelMode: 'WALKING'
                }, function(response, status) {
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                        vm.route = response.routes[0];
                        vm.showDistance = vm.route.legs[0].distance.text;
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });
            });
            vm.showRoute = true;

        }


    }
})();

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}

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

Answer 1

我也堅持這個問題，我發現谷歌地圖API 3.26的最新版本導致了這個問題，我嘗試了它的舊版本（3.24），一切都按預期工作。 但是這個版本將來有一天會被棄用，當3.26版本成為Frozen版本時我們將不得不盡快使用最新版本。 https://maps.googleapis.com/maps/api/js?v=3.24

離子谷歌地圖縮放，移動和標記顯示問題

問題描述

1 個解決方案

解決方案1
0 2016-09-09 11:07:25

離子谷歌地圖縮放，移動和標記顯示問題

問題描述

1 個解決方案

解決方案1 0 2016-09-09 11:07:25

解決方案1
0 2016-09-09 11:07:25