Question

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

Answer 1

您可以通过将styles添加到配置对象（new google.maps.Map中的第二个参数）来设计地图。请参阅docs

注意：标记图标是私有图像，因此您应该自己创建一个图像。（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"
      }
    ]
  }
]

现场例子：

＆＃13;

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"
      }
    ]
  }
];

＆＃13;

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

＆＃13;

<h3>My Google Maps Demo</h3>
<div id="map"></div>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

＆＃13;

http://output.jsbin.com/fiqapa

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

1 个答案: