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

我也遇到了这个问题，我发现最新版本的Google地图API 3.26导致了这个问题，我尝试了它的旧版本（3.24），一切都按预期工作。但是这个版本将来有一天会被弃用，当3.26版本成为Frozen版本时我们将不得不尽快使用最新版本。 https://maps.googleapis.com/maps/api/js?v=3.24

离子谷歌地图缩放，移动和标记显示问题

1 个答案: