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

我做了一個簡單的應用程序來顯示我的當前位置和一個默認位置之間的地圖上的距離和路線。我設法在屏幕上的地圖（銀河S4，但我不能在平板電腦Galaxy Tab的4送），但我有未來的問題：離子谷歌地圖縮放，移動和標記顯示問題

我不能用兩個手指縮放，小部件+/- 效果很好，但是當我嘗試用手指放大時，只會得到一個沒有任何地圖的色彩分區，並且如果我按+或 - 在小部件地圖上返回
我無法在任何方向移動地圖，它是靜態的。我想用手指向各個方向移動
我無法顯示標記，當我點擊標記時什麼也沒有發生。當我點擊PC上的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

我堅持了這個問題也是一樣，我發現谷歌地圖API的最新版本3.26的原因這問題，我嘗試一箇舊版本（3.24），一切都按預期工作。但是這個版本在將來某一天將會被棄用，並且當3.26版本變成凍結版本時我們將不得不使用最新版本。 https://maps.googleapis.com/maps/api/js?v=3.24

來源

2016-09-09 11:07:25

我做了嘗試，但它是同樣的事情。也許我沒有正確地嘗試，因爲我這樣做： .Should我以這種方式做呢？ – Sasa

任何人都可以告訴我如何禁用捏縮放，當我可以讓他們工作？我用meta發現的任何解決方案都不起作用 – Sasa

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

回答

相關問題