javascript - 无法在 gmap-window 中设置未定义的属性 'opacity'

Question

出现以下错误，因为无法设置未定义的属性“不透明度”

HTML和Js如下

<ui-gmap-window show="map.infoWindow.show" coords="map.infoWindow.center" options="map.infoWindow.options"></ui-gmap-window>

$scope.map.infoWindow.options.content = "<h1>....<div>....</div></h1>";

找到根本原因

我们不应该在 infoWindow 选项中使用 content obj

AngularJS Google Map Directive - Error while displaying InfoWindow on Marker Click event

所以从堆栈上面尝试

<ui-gmap-window show="map.infoWindow.show" coords="map.infoWindow.center" options="map.infoWindow.options">
                            {{ infoWindowContent }}
                        </ui-gmap-window>

$scope.infoWindowContent = "<h1>....<div>....</div></h1>";

到这里，能够解决那个控制台报错。但是 html 没有渲染。显示纯 html 字符串(不转换为 DOM)

有什么办法可以解决这个问题吗？

Answer 1

自 ng-bind-html指令似乎不能与 google.maps.InfoWindow 一起正常工作，例如设置 content 属性 ui-gmap-window 指令:

<ui-gmap-window show="infoWindow.show" coords='infoWindow.coords'>
          <div ng-bind-html="{{infoWindow.content}}"></div>
</ui-gmap-window> 

将导致您遇到的错误。

但是您可以考虑引入自定义指令以将 InfoWindow 内容显示为 html:

.directive('toHtml', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function link($scope, $element, attrs) {
                attrs.$observe('toHtml', function (value) {
                    if (value.length > 0) {
                        var $el = $compile(value)($scope);
                        $element.empty().append($el)
                    }
                })
            }
        }
    }])

然后绑定(bind)html内容:

<ui-gmap-window show="infoWindow.show" coords='infoWindow.coords'>
          <div to-html="{{infoWindow.content}}"></div>
</ui-gmap-window> 

例子

angular.module('MapApp', ['uiGmapgoogle-maps'])

  
    .directive('toHtml', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function link($scope, $element, attrs) {
                attrs.$observe('toHtml', function (value) {
                    if (value.length > 0) {
                        var $el = $compile(value)($scope);
                        $element.empty().append($el)
                    }
                })
            }
        }
    }])

    .controller('MapCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {

        $scope.map = {
            zoom: 4,
            bounds: {},
            center: {
                latitude: 40.1451,
                longitude: -99.6680
            },
            options: {}
        };

        $scope.infoWindow = {
            show: false,
            content: '',
            coords: {}
        };


        $scope.markers = [
            {
                latitude: 40.705565,
                longitude: -74.1180857,
                title: "New York",
                id: 1,
            },
            {
                latitude: 37.7576948,
                longitude: -122.4726193,
                title: "San Fransisco",
                id: 2,
            }
        ];

        uiGmapGoogleMapApi.then(function (maps) {

            $scope.showInfoWindow = function (marker, eventName, model) {
                $scope.infoWindow.coords.latitude = model.latitude;
                $scope.infoWindow.coords.longitude = model.longitude;
                $scope.infoWindow.content = "<h2>" + model.title + "</h2>";
                $scope.infoWindow.show = true;
            };

            $scope.closeInfoWindow = function () {
                $scope.infoWindow.show = false;
            };

        });
    });

.angular-google-map-container {
	height: 30em;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.js"></script> 
 
 <div ng-app="MapApp" ng-controller="MapCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="map.options" bounds="map.bounds">
            <ui-gmap-window show="infoWindow.show" coords='infoWindow.coords' closeClick="closeInfoWindow()">
                <div to-html="{{infoWindow.content}}"></div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" coords="'self'" options="'options'"  click="showInfoWindow">
            </ui-gmap-markers>
        </ui-gmap-google-map>
  </div>