0
我正在用Google地圖地圖和搜索引擎顯示不同標記的網站。我可以用標記瀏覽地圖,我可以點擊標記來顯示內容。當我點擊搜索結果時,地圖會平移到結果上,同時我希望打開標記內容的窗口。 這是我的代碼AngularJS在Google地圖中點擊時打開窗口
mymarkers.js
var app = angular.module('myApp');
app.constant("myMarkers", [{
lat: ..,
lng: ..,
title:'..'
},{
lat: ..,
lng: ..,
title:'..'
}..]
app.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
};
}]);
的index.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>
你可以用它的功能我想看到箭頭添加爲了打開窗口,當我點擊搜索結果的同時,該地圖移動。 感謝您的幫助
不知道爲什麼,但窗口中打開是空的(沒有適當的內容),它並沒有泛到正確的標記..雖然我沒有任何錯誤 –
你見過我提供的例子(plunker鏈接)?,它演示瞭如何設置信息窗口nt並將其放在標記上 –
我將其作爲回答發佈 –