出现以下错误,因为无法设置未定义的属性“不透明度”
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)
有什么办法可以解决这个问题吗?
最佳答案
自 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>
关于javascript - 无法在 gmap-window 中设置未定义的属性 'opacity',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42343920/