javascript - 如何为 Google Maps API 景观提供背景图像而不是背景颜色？

Question

我是第一次尝试 Google Maps API。

我已经完成了定位和缩放 map 、删除功能以及删除某些 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 channel 给风景背景颜色不透明度 0(或者rgba(0, 0, 0, 0) 或 hsla) 以允许背景图像显示。

但到目前为止，我还无法使用这两种方法中的任何一种 - “color” 键似乎只采用十六进制值。 (真的吗？)

如何为景观提供背景图像而不是背景颜色？

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