0
我剛開始練習離子，它真的很酷。我被卡住的地方是這個錯誤ionic.bundle.js:26799 ReferenceError: google is not defined。我有一個我稱之爲位置獲取器的應用程序。其目的是在應用程序加載時顯示用戶的位置，並在點擊banks或schools時顯示當前位置周圍的banks或schools，半徑爲25公里。我已經成功地完成了這個任務，但是問題出在我的應用程序加載時，它不顯示地圖，除非我按下find me按鈕。它在那之後很好地工作。但我不想使用find me按鈕。我想要的是，當控制器加載時，find me函數自動調用，然後在所有操作之後，我不想每次都重新加載映射。但是當我在我的控制器中調用find me函數時，它會給出這個便宜的錯誤。我該如何解決這個問題？我嘗試了很多東西，比如在我的index文件中安排javascript文件，嘗試使用init。但沒有成功。離子 - 調用控制器引起的函數ReferenceError：google沒有定義
這裏是我的controller.js
app.controller('main', function($scope) {
var map, infoWindow;
$scope.initLocation = function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 15
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
$scope.position_lat = position.coords.latitude;
$scope.position_long = position.coords.longitude;
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn 't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
// var map;
// var infowindow;
function initMap(place_name) {
var pyrmont = { lat: $scope.position_lat, lng: $scope.position_long };
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 25000,
type: [place_name]
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
$scope.show_places = function(place_name) {
initMap(place_name);
}
}）代碼;
這裏是我的的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">
<title></title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Location Finder</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<div class="bar bar-footer bar-assertive" ng-controller="main">
<div class="button-bar">
<button class="button button-positive" ng-click="show_places('bank')">Banks</button>
<button class="button button-energized " ng-click="show_places('school')">Schools</button>
<button class="button button-positive " ng-click="initLocation() ">Find me</button>
</div>
</div>
</ion-pane>
</body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey_Q&libraries=places ">
</script>
</html>