AngularJS在Google地图中点击时打开窗口

Question

我正在用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> 

你可以用它的功能我想看到箭头添加为了打开窗口，当我点击搜索结果的同时，该地图移动。 感谢您的帮助

Answer 1

它发生，因为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); 
}); 

Demo (plunker)