谷歌地图信息窗口按钮未显示
Google map info window button is not displaying?
这里我有带信息窗口的地图标记。在信息窗口中,我需要添加一个按钮。当我点击该按钮时,它应该会根据标记点击传递id值。任何人能帮我吗?我已经添加了我的fiddelehttp://jsfiddle.net/5z86v5ay/5/
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var cities = [
{
id:'1',
city: 'Toronto',
desc: 'This is the best city in the world!',
lat: 43.7000,
long: -79.4000
},
{
id:'2',
city: 'New York',
desc: 'This city is aiiiiite!',
lat: 40.6700,
long: -73.9400
},
{
id:'3',
city: 'Chicago',
desc: 'This is the second best city in the world!',
lat: 41.8819,
long: -87.6278
},
{
id:'4',
city: 'Los Angeles',
desc: 'This city is live!',
lat: 34.0500,
long: -118.2500
},
{
id:'5',
city: 'Las Vegas',
desc: 'This city is live!',
lat: 36.0800,
long: -115.1522
}
];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div><div class="infoWindowContent"><button type="button" value="Get id" name="Book Now" ng-click="getid(' + info.id + ')>get</button></div>';
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
$scope.getid =function(id)
{
console.log(id);
}
for (i = 0; i < cities.length; i++) {
createMarker(cities[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
$scope.clearMarkers = function() {
for (var i = 0; i < $scope.markers.length; i++) {
$scope.markers[i].setMap(null);
}
$scope.markers.length = 0;
}
$scope.filterMarkers = function() {
//1.select filtered cities
var filteredCities;
var cityDesc = $scope.data.singleSelect;
if(cityDesc == '0') {
filteredCities = cities;
}
else {
filteredCities = cities.filter(function(c){
if(c.desc == cityDesc)
return c;
});
}
//2.update markers on map
$scope.clearMarkers();
for (i = 0; i < filteredCities.length; i++) {
createMarker(filteredCities[i]);
}
}
});
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<br><br>
<label>Filter Marker </label><br>
<select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()">
<option value="0">all</option>
<option value="This is the best city in the world!">This is the best city in the world!</option>
<option value="This city is aiiiiite">This city is aiiiiite</option>
<option value="This is the second best city in the world!">This is the second best city in the world!</option>
<option value="This city is live!">This city is live!</option>
</select><br>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
所提供的示例存在两个问题:
1) 第一个是打字错误,在ng-click
表达式中缺少右双引号,而不是ng-click="getid(' + info.id + ')
,它应该是ng-click="getid(' + info.id + ')"
2) 第二,由于google.maps.InfoWindow
的动态特性,需要编译content
属性,否则将不会触发ng-click
。
总之,您可以将createMarker
函数替换为:
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
marker.templateContent = '<div><h2>' + marker.title + '</h2><div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div><div class="infoWindowContent"><button type="button" name="Book Now" ng-click="getid(' + info.id + ')">Book Now</button></div>';
google.maps.event.addListener(marker, 'click', function () {
var iwTemplate = ($compile(marker.templateContent)($scope));
infoWindow.setContent(iwTemplate[0]);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
注意:不建议在中执行DOM操作控制器,更喜欢用于该目的的指令。所以你可以考虑>为信息窗口创建一个指令
修改的JSFiddle
相关文章:
- 如何使用AngularJS显示按钮或锚标记值
- PHP到JavaScript图表;显示w/按钮
- 输入按钮分隔显示按钮名称和值
- 如果条件为true,ServiceNow显示按钮
- 仅当在文本框中输入文本时显示X按钮
- 点击页面上的计数和显示按钮
- 填写完输入后,如何显示按钮
- 聚焦时如何显示按钮?有棱角的
- 如果已登录,则显示按钮,Meteor's空格键
- 通过键盘单击显示按钮上的按键事件
- 防止在 Jquery 表单提交时加载页面,但“无”显示按钮
- 为什么没有正确显示按钮
- 单击另一个用于显示/隐藏图层的按钮时,在Adobe PDF中隐藏/显示按钮的代码是什么
- 是否可以在单击其他按钮时显示按钮的引导弹出框
- 嵌入应该能够显示按钮
- 根据 Cookie 的存在突出显示按钮
- 如何使用javascript在特定网页上显示按钮
- CSS 在图像上显示按钮
- 单击时隐藏按钮,计时器用完时显示按钮
- 当用户使用 jquery 将焦点聚焦到文本区域时显示按钮