0
我建立了一个模块，从我的数据库中读取位置，并使用Google地图APi在地图上显示标记。当前页面加载时，我得到一个位置列表并在地图上看到标记，但地图是空的（灰色屏幕），只显示Google徽标和最大缩放按钮。 我没有成功找到问题所在。 这是我的代码： map.html：谷歌地图开始灰色
<div class="page map" data-ng-controller="mapCtrl">
<div class="panel panel-default">
<div class="panel-heading " >
<h3 class="panel-title">
Locations
</h3><!-- panel-title h3 END -->
</div><!-- panel-heading div END -->
<div class="panel-body ">
<div ng-show="no_data">{{main.noDataMsg}}</div><!--if noDataFlag==true show noDataMsg div END-->
<div ng-show="!no_data">
<div class="container-fluid noPadding">
<div class="row-fluid">
<div class="col-md-12 noPadding">
<form>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search in Map Table" ng-model="searchMapTableData">
<div class="input-group-addon"><i class="fa fa-search"></i></div><!-- input-group-addon div END -->
</div><!-- input-group div END -->
</div><!-- form-group div END -->
</form><!-- form div END -->
</div><!-- col-md-12 div END -->
</div><!--row-fluid div END -->
<div class="row-fluid">
<div class="col-md-4 noPadding">
<div class="table_wrapper">
<table class="table table-bordered table-striped">
<thead fsm-sticky-header>
<tr>
<th>
<a href="" ng-click="sortType = 'timestamp'; sortReverse = !sortReverse">
Time
<span ng-show="sortType == 'timestamp' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'timestamp' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'latitude'; sortReverse = !sortReverse">
Latitude
<span ng-show="sortType == 'latitude' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'latitude' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'longitude'; sortReverse = !sortReverse">
Longitude
<span ng-show="sortType == 'longitude' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'longitude' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in locations_data | orderBy:sortType:sortReverse | filter:matchSearchInput(searchMapTableData)"
ng-class="{'selectedRowMap':$index == selectedRow}"
ng-click="setClickedRow($index)"
context-menu="menuOptions" model="'locations'" ng-model="locations_data" user-tag tag="{{item.user_tag}}">
<td data-ng-click="goToLocation(item)"> {{item.timestamp}} </td>
<td data-ng-click="goToLocation(item)">{{item.latitude}} </td>
<td data-ng-click="goToLocation(item)"> {{item.longitude}}</td>
</tr>
</tbody>
</table><!-- table END -->
</div>
<span class="load_more" lazyload category="locations">{{error_text}}</span>
</div><!--col-md-4 div END -->
<div class="col-md-8 noPaddingRight" ng-show="!no_data">
<div class="map_wrapper">
<ui-gmap-google-map control="map" refresh="true" events="map.events" center="center" zoom="map.zoom" draggable="true" language="en" options="options" >
<ui-gmap-markers models="randomMarkers" coords="'coords'" idKey="'id'" options="'options'" >
</ui-gmap-markers>
<ui-gmap-map-control>
<button type="button" class="btn btn-primary" data-ng-click="zoomToAllPoints()">MAX ZOOM</button>
</ui-gmap-map-control>
</ui-gmap-google-map>
</div>
</div><!-- col-md-8 div END -->
</div><!-- row-fluid div END -->
</div><!-- container-fluid div END -->
</div><!-- if noDataFlag== false show bookmarks information div END-->
</div><!-- panel-body div END -->
</div><!-- panel panel-default div END -->
mapCtrl.js：
/**
* Created by Netalie on 5/3/2016.
*/
angular.module('app').controller('mapCtrl', function ($scope, $rootScope, mainTarget, $timeout, uiGmapIsReady, $filter) {
$scope.category_name = 'locations';
$scope.locations_data = [];
$scope.main_array = [];
$scope.no_data = true;
$rootScope.$on('targetLoaded', function() {
//$scope.init();
});
$scope.options = {
width: 520,
height: 624
}
$scope.zoomToAllPoints = function() {
var markers = $scope.markerData; //some array;
$scope.bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
$scope.bounds.extend(markers[i]);
}
uiGmapIsReady.promise().then((function() {
$timeout($scope.setFitBounds, "100")
}));
};
$scope.init = function() {
$scope.window_height = $(window).height() - 290;
// console.debug('WINDOW HEIGHT IS: ',$scope.window_height);
angular.element('.angular-google-map-container').css('height', $scope.window_height + 'px');
$scope.selectedRow = null;
$scope.sortType = 'timestamp'; // set the default sort type
$scope.sortReverse = true; // set the default sort order
$scope.searchNetworks = ''; // set the default search/filter term
//$scope.locations_data = mainTarget.getProperty().locations;
$scope.noDataFlag = true;
var markers = [];
$scope.markerData = [];
if ($scope.locations_data != undefined) {
for (var i = 0; i < $scope.locations_data.length; i++) {
var label = "Longitude: " + $scope.locations_data[i].longitude + "\n" +
"Latitude: " + $scope.locations_data[i].latitude + "\n" +
"Timestamp:" + $scope.locations_data[i].timestamp;
var marker = {
id: $scope.locations_data[i].record_hash,
coords: {
latitude: $scope.locations_data[i].latitude,
longitude: $scope.locations_data[i].longitude
},
options: {title: label},
};
// console.debug('MARKER',marker);
var myLatlng = new google.maps.LatLng(parseFloat($scope.locations_data[i].latitude), parseFloat($scope.locations_data[i].longitude));
$scope.markerData.push(myLatlng);
markers.push(marker);
}
}
$scope.randomMarkers = markers;
if ($scope.locations_data != undefined) {
if ($scope.locations_data.length > 0) {
$scope.noDataFlag = false;
$scope.center = {latitude: markers[0].coords.latitude, longitude: markers[0].coords.longitude};
}
else {
$scope.noDataFlag = false;
}
}
else {
$scope.noDataFlag = false;
}
$scope.zoomToAllPoints();
}
$scope.setClickedRow = function (index) { //function that sets the value of selectedRow to current index
$scope.selectedRow = index;
}
$scope.goToLocation = function (item) {
$scope.center = {latitude: item.latitude, longitude: item.longitude};
// console.debug('goToLocation', $scope.center);
angular.extend($scope.map, {zoom: 15});
//$scope.map = {zoom: 15};
}
$scope.center = {latitude: 45, longitude: -73}
//$scope.init();
$scope.map = {zoom: 15};
$scope.setFitBounds = function() {
$scope.map.getGMap().fitBounds($scope.bounds);
};
//function for run filter on specific columns in the table
$scope.matchSearchInput = function (query) {
if ($scope.locations_data.length > 0) {
return function (item) {
return ($filter('uppercase')($scope.returnEmptyString(item.timestamp)).match($filter('uppercase')(query)) ||
$filter('uppercase')($scope.returnEmptyString(item.latitude)).match($filter('uppercase')(query)) ||
$filter('uppercase')($scope.returnEmptyString(item.longitude)).match($filter('uppercase')(query)));
}
}
};
//function check if string is null and return empty string
$scope.returnEmptyString = function (str) {
if (str == null) {
return '';
}
return str;
};
// listen for new_data event from the lazy load directive
$scope.$on('mainArrayLoaded', function (event, args) {
// console.debug("MAIN ARRAY LOADED",args);
$scope.locations_data = $scope.main_array;
$scope.init();
$scope.no_data = false;
});
});
检查你的浏览器控制台日志以找出任何可能的错误，并分享我没有除了在googleApiKey警告任何错误的代码 – Aminul
仅仅是最低线，但是当我点击F12并关闭浏览器控制台地图加载 –