Ионные карты Google, масштабирование, перемещение и маркеры, показывающие проблему

Я сделал простое приложение, чтобы показать расстояние и маршрут по карте между моим текущим местоположением и одним положением по умолчанию. Мне удалось получить карты на экране (на Galaxy S4, но я не могу получить на планшете Galaxy Tab 4), но у меня есть следующие проблемы:Ионные карты Google, масштабирование, перемещение и маркеры, показывающие проблему

Я не могу масштаб двумя пальцами, на виджете +/- отлично работает, но когда я пытаюсь масштабировать пальцами, просто получайте один цвет div без каких-либо карт, и если я нажму + или - на виджетах вернутся карты
Я не могу перемещать карты в любом направлении, это статично. Я хотел бы двигаться пальцами во всех направлениях
Я не могу показать маркеры, когда я нажимаю маркеры, ничего не произошло. Когда я нажимаю на ПК на Ionic, работа отлично работает. Вторая проблема с маркерами заключается в том, что я должен нажать/щелкнуть, чтобы показать маркеры, я бы всегда был на
Я не могу получить расстояние, чтобы писать на экране, хотя расстояние было показано, когда я дважды нажимаю кнопку.

Это мой код, может ли кто-нибудь мне помочь? Благодарю.

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; 
}

источник

2016-09-05 Sasa

я застрял с этой проблемой тоже, и я нашел, что последняя версия Google карты API 3.26 причины это вопрос, я пробую более старую версию (3.24), и все работает так, как ожидалось. Но эта версия в будущем будет устаревать, и нам скоро придется использовать последнюю версию, когда версия 3.26 станет Frozen. https://maps.googleapis.com/maps/api/js?v=3.24

источник

2016-09-09 11:07:25

Я попытался, но это то же самое. Может быть, я не попытался правильно, потому что я это делаю: . Я так делаю или нет? – Sasa

Может ли кто-нибудь сказать мне, как отключить масштабирование зума, когда я смогу заставить их работать? Любое решение, которое я нашел с мета, не работает – Sasa

Ионные карты Google, масштабирование, перемещение и маркеры, показывающие проблему

ответ

Смежные вопросы