我有谷歌地图标有一些城市。每个城市都有自己的团队。最初会向用户显示一个按钮,说明“选择城市”。
当用户点击标记并显示另一个带有城市名称的按钮时,如何隐藏它?
因此,当用户点击它时,将显示一个包含团队详细信息的新页面
HTML
<section ng-app="mapsApp" ng-controller="MapsCtrl">
<div class="col-md-4">
<button>choose city </button>
<button ng-click="teamname(team)">
Your team is {{teamname}}
</button>
</div>
<div id="map" class="col-md-8"></div>
</section>
的Javascript
var cities = [{
name: 'Toronto',
team: 'Maple Leafs',
lat: 43.643156,
long: -79.379614
}, {
name: 'New York',
team: 'Rangers',
lat: 40.750524,
long: -73.993352
}, {
name: 'Chicago',
team: 'Blackhawks',
lat: 41.881017,
long: -87.674142
}, {
name: 'Los Angeles',
team: 'Kings',
lat: 34.043076,
long: -118.26701
}, {
name: 'Boston',
team: 'Bruins',
lat: 42.365346,
long: -71.062385
}, {
name: 'Buffalo',
team: 'Sabres',
lat: 42.875036,
long: -78.87611
}, {
name: 'Detroit',
team: 'Red Wings',
lat: 42.325174,
long: -83.051322
}, {
name: 'Florida',
team: 'Panthers',
lat: 26.159598,
long: -80.325469
}, {
name: 'Montreal',
team: 'Canadiens',
lat: 45.496331,
long: -73.570035
}, {
name: 'Ottawa',
team: 'Senators',
lat: 43.251986,
long: -79.806622
}, {
name: 'Tampa Bay',
team: 'Lightning',
lat: 27.94274,
long: -82.451709
}, {
name: 'Carolina',
team: 'Hurricanes',
lat: 35.80344,
long: -78.721894
}, {
name: 'Columbus',
team: 'Blue Jackets',
lat: 39.969276,
long: -83.006004
}, {
name: 'New Jersey',
team: 'Devils',
lat: 40.733438,
long: -74.171025
}, {
name: 'New York',
team: 'Islanders',
lat: 40.722998,
long: -73.590721
}, {
name: 'Philadelphia',
team: 'Flyers',
lat: 39.901243,
long: -75.171897
}, {
name: 'Pittsburgh',
team: 'Penguins',
lat: 40.439174,
long: -79.98972
}, {
name: 'Washington',
team: 'Capitals',
lat: 38.898014,
long: -77.020901
}, {
name: 'Anaheim',
team: 'Ducks',
lat: 33.807804,
long: -117.876481
}, {
name: 'Calgary',
team: 'Flames',
lat: 51.037427,
long: -114.051994
}, {
name: 'Edmonton',
team: 'Oilers',
lat: 53.572174,
long: -113.455192
}, {
name: 'Phoenix',
team: 'Coyotes',
lat: 33.531987,
long: -112.261158
}, {
name: 'San Jose',
team: 'Sharks',
lat: 37.332802,
long: -121.901171
}, {
name: 'Vancouver',
team: 'Canucks',
lat: 49.277689,
long: -123.108076
}, {
name: 'Colorado',
team: 'Avalanche',
lat: 39.748955,
long: -105.006341
}, {
name: 'Dallas',
team: 'Stars',
lat: 32.790413,
long: -96.810368
}, {
name: 'Minnesota',
team: 'Wild',
lat: 44.944162,
long: -93.100852
}, {
name: 'Nashville',
team: 'Predators',
lat: 36.160036,
long: -86.778542
}, {
name: 'St. Louis',
team: 'Blues',
lat: 38.62646,
long: -90.20207
}, {
name: 'Winnipeg',
team: 'Jets',
lat: 49.892837,
long: -97.14352
}];
/* End of Data */
angular.module('mapsApp', [])
.controller('MapsCtrl', function($scope) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(45, -100),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.cities = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function(city) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(city.lat, city.long),
});
marker.name = city.name;
marker.team = city.team;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('<div class="infoWindowContent">' + marker.name + ' - ' + marker.team + '</div>');
infoWindow.open($scope.map, marker);
});
$scope.cities.push(marker);
}
for (i = 0; i < cities.length; i++) {
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
$scope.teamname = function (id) {
$location.path('/team/'+id);
};
});
任何帮助将不胜感激