【问题标题】：How can I give Google Maps API landscape a background image instead of a background color?如何为 Google Maps API 风景提供背景图片而不是背景颜色？
【发布时间】：2018-07-17 20:02:09
【问题描述】：

我是第一次尝试使用 Google Maps API。

我已经完成了定位和缩放地图、删除功能和删除某些 UI 控件的工作。

我还设法给风景添加了背景色。

  {
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#ff0000"
      }
    ]
  }

但我想给风景一个背景图片，而不是背景颜色。

我可以直接使用类似的东西来做到这一点：

  {
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "background-image": "/my-image.jpg"
      }
    ]
  }

或者使用 CSS 给 #map 一个 background-image 并使用 alpha 通道（rgba(0, 0, 0, 0) 或 hsla）给景观背景颜色一个不透明度 0 以允许 background-image 显示.

但到目前为止，我一直无法让这些方法中的任何一种工作 - "color" 键似乎只采用十六进制值。（真的吗？）

如何为风景提供背景图片而不是背景颜色？

【问题讨论】：

背景图应该是固定的还是要随地图移动？
背景将始终覆盖地图的一部分。想象一张显示英国的矩形框地图。在初始缩放级别，右下角可以看到一小部分法国和比利时，而可以看到整个爱尔兰共和国。照片背景将完全覆盖英国（即包括北爱尔兰，但不包括马恩岛）。

标签： javascript json google-maps google-maps-api-3

【解决方案1】：

您可以通过adding a custom overlay 执行此操作。点击链接查看工作示例。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: {lat: 62.323907, lng: -150.109291},
      mapTypeId: 'satellite'
    });

    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 = 'url_of_your_image';

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

【讨论】：

谢谢，我已经看到了。如果没有更好的方法，我会采用这种方法，但要让所有土地都有摄影背景，但没有大海，这似乎是一种非常困难的方法。
你试过这个页面上的例子Showing/Hiding overlays。

【解决方案2】：

原来我要找的不是自定义叠加层，而是地面叠加层。

这种（更直接的）覆盖解决方案相当简单。

要创建地面叠加层，只需 2 个步骤：

第一步

为您希望使用的图像声明变量以及图像右上角和左下角的纬度和经度坐标：

var imageSrc = '/my-image.png';
var imageNortheastCorner = new google.maps.LatLng(58.70303006647019, 2.439521484375);
var imageSouthwestCorner = new google.maps.LatLng(49.99166659140519, -8.402314453125);

第 2 步

应用声明的变量来创建图像边界和叠加层，然后将叠加层添加到地图：

var imageBounds = new google.maps.LatLngBounds(imageSouthwestCorner, imageNortheastCorner);

myOverlay = new google.maps.GroundOverlay(imageSrc, imageBounds);

myOverlay.setMap(map);

这就是我们所需要的。

特别感谢这个页面（在搜索结果的下方），它显示了这个过程是多么简单：

http://maps.zemplate.com/customizing-maps/add-an-image-overlay-to-a-google-map

【讨论】：

嗯，使用带有自定义图块的自定义地图类型的全部意义（我想，这就是您所指的文档中的详细代码）是您可以为不同的缩放级别提供图块...顺便说一句，文档中有an example 准确地解释了您在此处描述的内容。

【解决方案3】：

您不能提供背景图片，如此处所述：

https://developers.google.com/maps/documentation/javascript/style-reference

颜色（#RRGGBB 格式的 RGB 十六进制字符串）设置特征的颜色。

并且没有图像功能，我的建议是在问题跟踪器中启动功能请求，建议将此功能添加到 JSON 样式对象。 (https://issuetracker.google.com)

【讨论】：