【发布时间】：2025-12-03 17:15:02
【问题描述】：
我在具有不允许内联 CSS 的内容安全政策的网站上使用 Google Maps Javascript API。
在实施 CSP 之前，信息窗口的样式很好。实现 CSP 后，信息窗口完全没有样式，因为 Google Maps Javascript API 使用内联 CSS。
我愿意接受任何能让信息窗口看起来像以前一样的解决方案。
我尝试的策略是获取 Google Maps API 添加到每个元素的内联样式，然后通过 jQuery 应用该样式。理论上，这应该可行，因为jQuery's css() method does not use inline CSS:
值得一提的是，如果样式属性是通过 直接用 JavaScript 就没有问题了。例如， jQuery 的 css() 方法很好，因为它更新了样式属性 直接在被子下面。
以下是一个可重现的最小示例。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/test.js"></script>
<link type="text/css" rel="stylesheet" href="/css/test.css">
</head>
<body>
<div id="map-wrapper">
<div id="map-canvas"></div>
</div>
</body>
</html>
CSS：
#map-canvas {
height: 100%;
width: 100%;
}
#map-wrapper {
height: 400px;
margin: auto;
max-width: 95%;
width: 600px;
}
JavaScript：
//on page load, call the function to initialize the map
$(function($) {
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?callback=initialize&key=yourKeyHere";
document.body.appendChild(script);
});
//function to initialize the map
function initialize() {
//construct the map
var map = new google.maps.Map(document.getElementById("map-canvas"), {
fullscreenControl: false,
mapTypeId: 'roadmap',
scaleControl: false,
streetViewControl: false,
zoomControl: false,
});
//center the map
var latLng = new google.maps.LatLng('34.4270881', '-117.57501819999999');
map.setCenter(latLng);
map.fitBounds(new google.maps.LatLngBounds(latLng));
//info window
var infoWindow = new google.maps.InfoWindow(), marker, i;
marker = new google.maps.Marker({position: latLng, map: map, title: 'marker title'});
google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() {
infoWindow.setContent("foobar");
infoWindow.open(map, marker);
google.maps.event.addListener(infoWindow, 'domready', applyStyles(document.getElementById("map-wrapper")));
}})(marker, i));
}
//function to get inline CSS and apply it via jQuery
function applyStyles(div) {
//log the div
console.log(div);
//loop through the inline CSS properties applied by Google Maps API
for (var propertyNum = 0; propertyNum < div.style.length; propertyNum++) {
//get property and convert to camelCase
var property = div.style[propertyNum].replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })
//get value
var value = div.style[property];
//log the property and value
console.log(property + " = " + value);
//apply style via jquery
$(div).css(property, value);
}
//log a line break
console.log("");
//do the same for children of this div
var children = $(div).children();
for (var child = 0; child < children.length; child++) {
applyStyles(children[child]);
}
}
这不起作用。没有任何样式生效。
【问题讨论】：
-
您何时/如何调用该函数？在 InfoWindow 打开并添加到 DOM 之后（在
domready事件触发之后），它可能无法处理 InfoWindow 内容。请提供一个 minimal reproducible example 来证明您的问题。 -
@geocodezip 我已经编辑了我的问题以表明我在
domready事件触发后调用了该函数。使用console.log()我已经确定该功能在信息窗口打开并添加到DOM后生效。该函数确实获得了 Google 添加到该窗口的内联样式。另请注意，我在#map-wrapper及其每个后代上执行此操作，因为信息窗口的样式似乎并不限于信息窗口div本身。 -
@geocodezip 我现在已经编辑了我的问题以包含一个最小的可重现示例。
标签： javascript jquery css google-maps-api-3 content-security-policy