使用angularjs google maps在标记点击上自定义infowindow

Question

我正在使用angularjs谷歌地图，我想自定义风格的信息，这是显示在一个标记点击。ui-gmap-window标记确实有自定义选项，它单独工作也很好。然而，当我试图在标记标记（ui-gmap-markers）中使用它时，它不会在标记点击上显示自定义样式的infoWindow。plunkr清楚地解释了这个问题。

     <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>

Answer 1

你应该用和你在分数上一样的方法。因为windows需要models数组中属性的名称。

所以首先在代码中添加这个

        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);

在html中，在 标记中添加以下models=“randomwindows”options=“'options'”

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

现在它应该起作用了：）

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