Пользовательское информационное окно при щелчке маркера с использованием карт angularjs google

Я использую карты Google angularjs, и я хотел бы настроить стиль infoWindow, который отображается при щелчке маркера. Тег ui-gmap-window имеет настраиваемые параметры и отлично работает автономно. Однако, когда я пытаюсь использовать его внутри тега маркеров (ui-gmap-markers), он не отображает информационное окно в пользовательском стиле при щелчке маркера. Планкр четко объясняет проблему.

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>

google-maps-markers infowindow angularjs-google-maps
person user3646625    schedule 04.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны использовать тот же метод, что и в своих оценках. Потому что окнам нужно имя свойства в массиве моделей.

Итак, сначала добавьте это в свой код

        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

person Miro Salo    schedule 14.03.2016