我试图使用此链接中的示例(大多数代码不是很重要,而是我添加的微小更改是完全不同的):
http://codepen.io/psutherland/pen/seiwE
angular.module('ionic.example', ['ionic'])
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
var site = new google.maps.LatLng(55.9879314,-4.3042387);
var hospital = new google.maps.LatLng(55.8934378,-4.2201905);
var mapOptions = {
streetViewControl:true,
center: site,
zoom: 18,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: site,
map: map,
title: 'Strathblane (Job Location)'
});
var hospitalRoute = new google.maps.Marker({
position: hospital,
map: map,
title: 'Hospital (Stobhill)'
});
var infowindow = new google.maps.InfoWindow({
content:"Project Location"
});
infowindow.open(map,marker);
var hospitalwindow = new google.maps.InfoWindow({
content:"Nearest Hospital"
});
hospitalwindow.open(map,hospitalRoute);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var request = {
origin : site,
destination : hospital,
travelMode : google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
&#13;
#map {
width: 100%;
height: 100%;
}
.scroll {
height: 100%;
}
&#13;
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
<!-- google maps javascript -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true">
</div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
</html>
&#13;
但是,当我使用&#34; map&#34;在div周围添加<div class="row">
时id如下:
<div class="row">
<div id="map" data-tap-disabled="true"></div>
</div>
地图变得不可见,我看到宽度为0.我无法理解为什么&#34; row&#34;上课会有这种影响。
答案 0 :(得分:1)
问题不是关于类“行”(任何其他类具有相同的效果)。原因似乎是div的内容有position: absolute
,因此包含div
的内容不会随内容自动延伸。要修复它,只需添加显式宽度和高度属性:
.row {
width: 100%;
height: 100%;
}