Question

我正在使用angularjs谷歌地图，我想自定义在标记点击上显示的infoWindow样式。 ui-gmap-window标签确实有自定义选项，它可以很好地独立运行。但是当我尝试在marker标签（ui-gmap-markers）中使用它时 - 它不会在标记点击上显示自定义样式的infoWindow。 plunkr清楚地解释了这个问题。

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>

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> </ui-gmap-windows>，如下所示

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

现在它应该有效：）

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

使用angularjs谷歌地图点击标记上的自定义信息窗口

1 个答案: