如何在多边形谷歌地图api中添加图像？

Question

我在Angular中编写了自己的谷歌地图指令。 我使用绘图管理器绘制了多边形。然后从用户绘制的坐标中获取坐标并绘制多边形。

现在我想以多边形添加图像。 如何在多边形区域添加图像？

  bermudaTriangle = new google.maps.Polygon({
                        paths: polygonsArray,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35
                        , editable: true
                    });

Answer 1

在这里，我们需要做一个像下面这样的技巧。

1. 添加多边形
2. 获取多边形坐标。
3. 现在使用指定坐标中的标记绘制一个图标
4. 然后它看起来像多边形内的图标

所以在这里，在添加多边形之后，我在多边形的中心位置借助于标记绘制了图标。

var bounds = new google.maps.LatLngBounds();
                var i, center;

                for (i = 0; i < polygonsCoordinates.length; i++) {
                    bounds.extend(polygonsCoordinates[i]);
                }
                center = bounds.getCenter();
                var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                var beachMarker = new google.maps.Marker({
                    position: { lat: center.lat(), lng: center.lng() },
                    map: map,
                    icon: image
                });