AngularJS在谷歌地图中点击时打开窗口
AngularJS open window when click in Google Maps
我正在建立一个网站,上面有谷歌地图和搜索引擎中显示的不同标记。我可以使用标记浏览地图,我可以单击标记以显示内容。当我单击搜索结果时,地图会平移到结果,我希望同时打开带有标记内容的窗口。这是我的代码
我的标记.js
var app = angular.module('myApp');
app.constant("myMarkers", [{
lat: ..,
lng: ..,
title:'..'
},{
lat: ..,
lng: ..,
title:'..'
}..]
应用.js
var app = angular.module('myApp', []);
angular.module('myApp').controller("myController", ["$scope", "myMarkers", function($scope, myMarkers){
$scope.markers= myMarkers;
$scope.$on("gmaps.marker.click", function(event, map, marker) {
});
//call the directive with the Angular event system
//1st parameter of the listener = event
$scope.centerMapOnMarker = function (marker){
$scope.$broadcast('center-on-marker', marker);
}
}]);
app.directive('myMap', ["myMarkers", function(myMarkers) {
// directive link function
var link = function(scope, element, attrs) {
var map, infoWindow;
var markers = [];
var mapOptions = {..
};
// init the map
function initMap() {..
}
// place a marker
function setMarker(map, position, title, content,link) {..
..
}
//center to the marker
//1st parameter of the listener = event
scope.$on('center-on-marker', function (event, args) {
var center = new google.maps.LatLng(args.lat, args.lng);
map.panTo(center);
map.setZoom(15);
var infowindow = new google.maps.InfoWindow(); <-- not working
infowindow.setContent(args.content);
infowindow.open(map, args);
});
function returnMarker(){
window.alert(markers[0].title);
}
// show the map and place some markers
initMap();
for (var i = 0; i < 100; i++) {
setMarker(map, new google.maps.LatLng(myMarkers[i].lat, myMarkers[i].lng), myMarkers[i].title, myMarkers[i].content, myMarkers[i].icon);
}
};
return {
restrict: 'A',
template: '<div id="gmaps"></div>',
replace: true,
link: link
};
}]);
索引.html
<div my-map=""></div>
<div class="myresearch">
<input placeholder="Search a restaurant" ng-model="search">
<div ng-show="search.length">
<ul class="list" ng-repeat="marker in markers | filter: search as filtered">
<li>
<span ng-click="centerMapOnMarker(marker)">
<label class="textr"> {{marker.title}} </label>
</li>
</ul>
您可以使用箭头看到我想添加哪个功能,以便在地图移动的同时单击搜索结果时打开窗口。感谢您的任何帮助
发生这种情况是因为InfoWindow.open
函数期望Marker object
作为第二个参数,但在您的示例中args
对象不是Marker
类。您可以改为传递所选对象的索引:
<span ng-click="centerMapOnMarker($index)" />
$scope.centerMapOnMarker = function(index) {
$scope.$broadcast('center-on-marker', index);
}
然后获取相应的标记对象:
scope.$on('center-on-marker', function(event, index) {
var selectedMarker = markers[index];
map.panTo(selectedMarker.getPosition());
map.setZoom(15);
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(selectedMarker.content);
infowindow.open(map, selectedMarker);
});
演示(扑克)
相关文章:
- 谷歌地图点击潜水触发信息窗口
- 将FlowPlayer嵌入谷歌地图信息窗口
- 当我浏览回页面时,谷歌地图信息窗口不会弹出
- 谷歌地图信息窗口Z索引
- 谷歌地图信息窗口为每个标记显示相同的内容
- 如何隐藏谷歌地图Api 3中InfoBox窗口中的关闭(x)按钮
- 为位于路线上的谷歌地图标记(起点和终点)设置一个信息窗口
- 信息窗口谷歌地图点击事件给出错误
- 在新窗口中通过谷歌地图的localStorage作为地图中心
- Javascript谷歌地图每个信息窗口
- 更新打开的谷歌地图信息窗口
- 交互式信息窗口谷歌地图V3
- 谷歌地图API v3 - 通过外部单击打开信息窗口
- 一个信息窗口谷歌地图标记内的多个优惠
- 在信息窗口谷歌地图上显示BLOB数据中的图像
- 更复杂的信息窗口谷歌地图
- 显示mysql表数据在信息窗口谷歌地图API
- 谷歌地图API V3,点击打开信息窗口
- 使用 JavaScript 打开一个新窗口(谷歌地图),删除以前的事件处理程序
- 从GeoJSON文件添加图像到信息窗口?谷歌地图javascript API