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

【问题标题】：How to add image in polygon google map api?如何在多边形谷歌地图 api 中添加图像？
【发布时间】：2016-08-02 08:35:33
【问题描述】：

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

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

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

【问题讨论】：

没有官方方法可以通过 API 执行此操作。但也许这可以帮助你：stackoverflow.com/a/36773480/2661226（它似乎不起作用但那是因为无法加载外部资源，但源代码本身应该会给你一些线索）
我正在搜索类似向多边形添加图标。

标签： angularjs google-maps

【解决方案1】：

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

添加多边形
获取多边形坐标。
现在在指定坐标处绘制一个带有标记的图标
然后它将看起来像多边形内的图标

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

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
                });

【讨论】：