如何将自定义css应用于Javascript中的google.maps.GundgroundOverlay

Question

我想将特定的样式应用于google.maps.Gundoverlay以旋转它。

function (imageUrl: string, bounds: google.maps.LatLngBounds, map: google.maps.Map){
let overlay = new google.maps.GroundOverlay(
imageUrl,
bounds);
overlay.setMap(map);
// looking for something like overlay.style.rotate = '45deg'
}

如何在Javascript中为google.maps.GundgroundOverlay添加样式？

感谢

---

编辑1:

所以我想在dom中找到这样的元素：

[...]
overlay.setMap(map);
console.log(document.querySelectorAll("img[src='" + imageUrl + "']"));

但奇怪的是，即使当我在浏览器的源代码中查找图像时，它也会返回一个空数组。。。

我继续搜索

Answer 1

据我所知，我别无选择，只能创建一个自定义Overlay。以下是我的解决方案，主要来自This Answer

旋转叠加.ts

export class CustomOverlay extends google.maps.OverlayView {
private div;
constructor(
private bounds: google.maps.LatLngBounds,
private image: string,
private rotation: number
) {
super();
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div = null;
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
onAdd() {
const div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
const img = document.createElement('img');
img.src = this.image;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div = div;
// Add the element to the "overlayLayer" pane.
const panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
draw() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
const overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
const sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
const ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
const div = this.div;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
div.style.transform = 'rotate(' + this.rotation + 'deg)';
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
onRemove() {
this.div.parentNode.removeChild(this.div);
this.div = null;
};
};

地图组件.ts

public addOverlay(imageUrl: string, rotation: number, bounds: google.maps.LatLngBounds, map: google.maps.Map){
let overlay = new CustomOverlay(
bounds,
imageUrl,
rotation,

);
overlay.setMap(map);
}