javascript - 如何使用完全相同的谷歌地图样式和 PIN 位置？

Question

我想对客户的网站 map 使用相同的样式和 PIN 位置，如下所示:http://www.bekaerttextiles.com/en
但除了谷歌地图 api 文件之外，我看不到与 map 相关的任何内容。它是如何生成这张 map 的？没有任何与 PIN 位置及其经纬度相关的 json 或 javascript。也不是 map 的白色风格。

Answer 1

您可以通过向配置对象添加样式来设计 map (new google.maps.Map 中的第二个参数)。请参阅docs

注意:标记图标是私有(private)图像，因此您应该自己创建一个。 (http://www.bekaerttextiles.com/build/web/images/marker.svg)

您正在寻找的样式是:

[
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#F2F0E9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

以及实例:

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: uluru,
    styles: styles
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

var styles = [
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#F2F0E9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
];

#map {
  height: 400px;
  width: 100%;
}

<h3>My Google Maps Demo</h3>
<div id="map"></div>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

http://output.jsbin.com/fiqapa