通過點擊AngularJS中的按鈕打開infowindow

Question

我已經使用谷歌地圖使用AngularJs哪些工作正常。然而，在點擊任何標記信息窗口將打開，但我需要通過點擊地圖之外的單選按鈕來打開它，這裏是代碼示例

HTML

<ng-map default-style="true" center="[24.8615, 67.0099]" zoom="11" scroll-wheel="false" zoom-to-inculude-markers="auto"> 
<info-window id="rider"> 
    <div ng-non-bindable=""> 
     {{vm.store.name}} <br/> 
     {{vm.store.title}}<br/> 
    </div> 
</info-window> 
<marker ng-repeat="(id, store) in vm.stores" id="{{id}}" icon="../assets/images/rider.png" 
     position="{{store.position}}" 
     on-click="vm.showStore(event, id)"></marker> 

的JavaScript/AngularJs

vm.stores = [ 
     {position: [24.8820869, 67.06881520000002], title: 'Bahadrubad'}, 
     {position: [24.8753973, 67.04096709999999], title: 'Mazar e Quaid'}, 
     {position: [24.8758, 67.0230], title: 'Karachi Zoo'}, 
     {position: [24.8532941, 67.01622309999993], title: 'Saddar Town'} 
    ]; 

NgMap.getMap().then(function (map) { 
     vm.map = map; 
    }); 

    vm.showStore = function (e, storeId) { 
     vm.store = vm.stores[storeId]; 
     vm.map.showInfoWindow('rider', this); 
    }; 

Answer 1

一旦單選按鈕列表初始化：

<label data-ng-repeat="store in vm.stores"> 
      <input type="radio" name="storeList" ng-model="store" ng-value="{{store}}" ng-change='vm.showStoreExt({{$index}})' /> 
       {{store.title}} 
     </label> 

您可以指定事件處理程序來顯示信息窗口，如下圖所示：

vm.showStoreExt = function (index) { 
     vm.store = vm.stores[index]; 
     var marker = vm.map.markers[index]; 
     vm.map.showInfoWindow('rider', marker); 
    }; 

工作實例

angular.module('mapApp', ['ngMap']) 
 

 
    .controller('mapController', function (NgMap) { 
 
    var vm = this; 
 
    vm.stores = [ 
 
     { position: [24.8820869, 67.06881520000002], title: 'Bahadrubad' }, 
 
     { position: [24.8753973, 67.04096709999999], title: 'Mazar e Quaid' }, 
 
     { position: [24.8758, 67.0230], title: 'Karachi Zoo' }, 
 
     { position: [24.8532941, 67.01622309999993], title: 'Saddar Town' } 
 
    ]; 
 

 
    NgMap.getMap().then(function (map) { 
 
     vm.map = map; 
 
    }); 
 

 

 
    vm.showStoreExt = function (index) { 
 
     vm.store = vm.stores[index]; 
 
     var marker = vm.map.markers[index]; 
 
     vm.map.showInfoWindow('rider', marker); 
 
    }; 
 

 
    vm.showStore = function (e, storeId) { 
 
     vm.store = vm.stores[storeId]; 
 
     vm.map.showInfoWindow('rider', this); 
 
    }; 
 

 

 

 

 
    });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 

 

 
<div ng-app="mapApp" ng-controller="mapController as vm"> 
 

 
     <label data-ng-repeat="store in vm.stores"> 
 
      <input type="radio" name="storeList" ng-model="store" ng-value="{{store}}" ng-change='vm.showStoreExt({{$index}})' /> 
 
       {{store.title}} 
 
     </label> 
 

 
     <ng-map default-style="true" center="[24.8615, 67.0099]" zoom="11" scroll-wheel="false" zoom-to-inculude-markers="auto"> 
 
      <info-window id="rider"> 
 
       <div ng-non-bindable=""> 
 
        {{vm.store.name}} <br/> {{vm.store.title}} 
 
        <br/> 
 
       </div> 
 
      </info-window> 
 
      <marker ng-repeat="(id, store) in vm.stores" id="{{id}}" position="{{store.position}}" on-click="vm.showStore(event, id)"></marker> 
 
     </ng-map> 
 

 

 
</div>