0

我正在使用 angularjs 谷歌地图，我想自定义样式显示在标记单击上的 infoWindow。ui-gmap-window 标签确实有自定义选项，它可以独立工作。但是，当我尝试在标记标记（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>
4

1 回答 1

0

您应该使用与标记相同的方法。因为 windows 需要模型数组中的属性名称。

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

        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

于 2016-03-14T14:06:23.930 回答