我构建了一个模块，可以从我的数据库中读取位置，并使用Googlemaps 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;
});
});
答案 0 :(得分：0)
我发现问题是页面已经在地图之前加载了所以我添加了
namespace testmatch
{
public class TennisGame2 : ITennisGame
{
private int p1point;
private int p2point;
private string p1res = "";
private string p2res = "";
private string player1Name;
private string player2Name;
public TennisGame2(string player1Name, string player2Name)
{
this.player1Name = player1Name;
p1point = 0;
this.player2Name = player2Name;
}
public string GetScore()
{
var score = "";
if (p1point == p2point && p1point < 3)
{
if (p1point == 0)
score = "Love";
if (p1point == 1)
score = "Fifteen";
if (p1point == 2)
score = "Thirty";
score += "-All";
}
if (p1point == p2point && p1point > 2)
score = "Deuce";
if (p1point > 0 && p2point == 0)
{
if (p1point == 1)
p1res = "Fifteen";
if (p1point == 2)
p1res = "Thirty";
if (p1point == 3)
p1res = "Forty";
p2res = "Love";
score = p1res + "-" + p2res;
}
if (p2point > 0 && p1point == 0)
{
if (p2point == 1)
p2res = "Fifteen";
if (p2point == 2)
p2res = "Thirty";
if (p2point == 3)
p2res = "Forty";
p1res = "Love";
score = p1res + "-" + p2res;
}
if (p1point > p2point && p1point < 4)
{
if (p1point == 2)
p1res = "Thirty";
if (p1point == 3)
p1res = "Forty";
if (p2point == 1)
p2res = "Fifteen";
if (p2point == 2)
p2res = "Thirty";
score = p1res + "-" + p2res;
}
if (p2point > p1point && p2point < 4)
{
if (p2point == 2)
p2res = "Thirty";
if (p2point == 3)
p2res = "Forty";
if (p1point == 1)
p1res = "Fifteen";
if (p1point == 2)
p1res = "Thirty";
score = p1res + "-" + p2res;
}
if (p1point > p2point && p2point >= 3)
{
score = "Advantage player1";
}
if (p2point > p1point && p1point >= 3)
{
score = "Advantage player2";
}
if (p1point >= 4 && p2point >= 0 && (p1point - p2point) >= 2)
{
score = "Win for player1";
}
if (p2point >= 4 && p1point >= 0 && (p2point - p1point) >= 2)
{
score = "Win for player2";
}
return score;
}
public void SetP1Score(int number)
{
for (int i = 0; i < number; i++)
{
P1Score();
}
}
public void SetP2Score(int number)
{
for (var i = 0; i < number; i++)
{
P2Score();
}
}
private void P1Score()
{
p1point++;
}
private void P2Score()
{
p2point++;
}
public void WonPoint(string player)
{
if (player == "player1")
P1Score();
else
P2Score();
}
}
}
进入
$scope.map.refresh();
功能