Question

因无法设置未定义

的属性'opacity'而出现以下错误

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选项中使用内容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)
                    }
                })
            }
        }
    }])

然后绑定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>

无法在gmap-window

1 个答案: