自定义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谷歌地图

回答

相关问题