Javascript 爱奥尼亚谷歌地图缩放、移动和标记显示问题
我制作了一个简单的应用程序，在地图上显示我当前位置和一个默认位置之间的距离和路线。我设法在屏幕上显示地图（在Galaxy S4上，但在平板电脑Galaxy Tab 4上无法显示），但我还有下一个问题：Javascript 爱奥尼亚谷歌地图缩放、移动和标记显示问题,javascript,google-maps,ionic-framework,ngcordova,Javascript,Google Maps,Ionic Framework,Ngcordova,我制作了一个简单的应用程序，在地图上显示我当前位置和一个默认位置之间的距离和路线。我设法在屏幕上显示地图（在Galaxy S4上，但在平板电脑Galaxy Tab 4上无法显示），但我还有下一个问题： 我不能用两个手指缩放，在widget+/-上效果很好，但当我尝试用手指缩放时，只会得到一个没有任何贴图的颜色div，如果我按+或-在widget上，贴图就会返回 我不能向任何方向移动地图，它是静态的。我想用手指向各个方向移动 我不能显示标记，当我点击标记时，什么也没发生。当我点击爱奥尼亚服务器上的
<!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>
我也遇到了这个问题，我发现谷歌地图API 3.26的最新版本导致了这个问题，我尝试了它的旧版本（3.24），一切都正常。但是这个版本在将来的某一天会被弃用，当3.26版本成为冻结版本时，我们将不得不很快使用最新版本。
我试过了，但都是一样的。也许我没有以正确的方式尝试，因为我这样做了：。我应该这样做还是不应该这样做？有人能告诉我，当我可以让它们工作时，如何禁用收缩缩放吗？我用meta找到的任何解决方案都不起作用
(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;
}
}
})();
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.scroll {
height: 100%;
}
#map {
width: 100%;
height: 300px;
}