自定義infowindow標記點擊使用angularjs谷歌地圖

我使用的是angularjs谷歌地圖，我想自定義樣式顯示在標記點擊的信息窗口。 ui-gmap-window標籤具有自定義選項，並且可以很好地獨立運行。但是，當我嘗試在標記標記（ui-gmap-markers）內使用它時 - 它不會在標記點擊上顯示自定義樣式的infoWindow。 012lkplunkr清楚地解釋了這個問題。自定義infowindow標記點擊使用angularjs谷歌地圖

http://plnkr.co/edit/Mif7wX1eEkwtfAQ93BCI?p=info

 <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds"> 
<!-- WORKS FINE STANDLONE WINDOW --> 
      <ui-gmap-window show="show1" coords="map.center" options="windowOptions"></ui-gmap-window> 

      <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="onClick"> 
<!-- DOES NOT WORK INSIDE MARKERS TAG--> 
       <ui-gmap-windows show="show" options="windowOptions"> 

       </ui-gmap-windows> 
      </ui-gmap-markers> 
     </ui-gmap-google-map>

來源

2016-03-04 user3646625

，你在你的標記做您應該使用同樣的方法。因爲windows需要模型數組中屬性的名稱。

在你的HTML <ui-gmap-windows> </ui-gmap-windows>標籤添加這些models="randomWindows" options="'options'"因此，首先在你的代碼

 var createRandomWindows = function (i, bounds, idKey) { 
     if (idKey == null) { 
      idKey = "id"; 
     } 
     var ret = { 
      title: 'm' + i, 
      options: { 
        boxClass: "infobox", 
        boxStyle: { 
         backgroundColor: "blue", 
         border: "1px solid red", 
         borderRadius: "5px", 
         width: "100px", 
         height: "100px" 
        }, 
        content: "Window options box work standalone ------------BUT DOES NOT work on marker click" 
       } 
     }; 
     ret[idKey] = i; 
     return ret; 
    } 
$scope.createWindows = [];

添加這個和你添加這些

var windows = []; 
windows.push(createRandomWindows(i, $scope.map.bounds)) 
$scope.randomWindows = windows;

老這樣的代碼

$scope.$watch(function() { return $scope.map.bounds; }, function(nv, ov) { 
     // Only need to regenerate once 
     if (!ov.southwest && nv.southwest) { 
      var markers = []; 
      var windows = []; 
      for (var i = 0; i < 50; i++) { 
       markers.push(createRandomMarker(i, $scope.map.bounds)) 
       windows.push(createRandomWindows(i, $scope.map.bounds)) 
      } 
      $scope.randomMarkers = markers; 
       $scope.randomWindows = windows; 


     } 
    }, true);

像這樣

<ui-gmap-windows models="randomWindows" coords="'self'" options="'options'" icon="'icon'"> 
     </ui-gmap-windows>

而現在它應該工作:)

http://plnkr.co/edit/L0vjrvW9LkphykapDIP4?p=preview

來源

2016-03-14 14:06:23

自定義infowindow標記點擊使用angularjs谷歌地圖

回答

相關問題