第1步

Question

我第一次尝试使用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通道（0或rgba(0, 0, 0, 0)为风景背景颜色提供不透明度hsla ）允许background-image显示。

但到目前为止，我无法让这些方法中的任何一种工作 - "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);
  }

Answer 2

事实证明，我所寻找的术语不是自定义叠加，而是地面叠加。

这个（更直接）的叠加解决方案相当简单。

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

第1步

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

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

Answer 3

您无法提供背景图片，如下所示：

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

color（格式为#RRGGBB的RGB十六进制字符串）设置要素的颜色。

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

如何为Google Maps API格局提供背景图片而不是背景色？

3 个答案:

第1步

第2步