2016-03-21 53 views
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> 

你可以用它的功能我想看到箭頭添加爲了打開窗口,當我點擊搜索結果的同時,該地圖移動。 感謝您的幫助

回答

0

它發生,因爲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)

+0

不知道爲什麼,但窗口中打開是空的(沒有適當的內容),它並沒有泛到正確的標記..雖然我沒有任何錯誤 –

+0

你見過我提供的例子(plunker鏈接)?,它演示瞭如何設置信息窗口nt並將其放在標記上 –

+0

我將其作爲回答發佈 –

相關問題