如何将图片放置在多边形谷歌地图中

Question

我需要将图片放入自定义大小的多边形中，就像图片中所示。我该如何实现？我认为这是一个不好的想法。 彩色区域应该由任何图像而不是颜色填充。

https://istack.dev59.com/qzJpu.webp

- pablo_ch

---

您可以使用图像叠加层 https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay - ScaisEdge

谢谢，我已经使用它了，但是对于任意多边形，它不起作用。 - pablo_ch

如果您添加的图像不是矩形而带有透明区域，也应该可以工作。 - ScaisEdge

@scaisEdge，我想要的是 ==> http://image.prntscr.com/image/c5f7c82c0b7b45479ea315d922f363f9.png在你的情况下，这不是一个解决方案。 - pablo_ch

我也在寻找这个问题的答案 +1 票 - Joseph Astrahan

这个有进展了吗？ 我想在多边形的顶部放置瓦片图像。 - Wolf87

Answer 1

Probably in your case Custom Overlay will be useful: Check this exmaple 代码片段:

var bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(62.281819, -150.287132),
            new google.maps.LatLng(62.400471, -150.005608));

        // The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/' +
            'javascript/examples/full/images/talkeetna.png';

        // The custom USGSOverlay object contains the USGS image,
        // the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);

- Artem Lopatiy

---

谢谢，@Artem，但这并不适用于任意多边形。你的例子只需要两个边界，而且只填充矩形区域。 - pablo_ch

我正在使用带有预先绘制项目的画布。我想要的是 ==> http://image.prntscr.com/image/c5f7c82c0b7b45479ea315d922f363f9.png - pablo_ch