使用Javascript的不同地图样式_javascript/canvas，地图样式点缩放_Android上的Google地图文本样式与样式向导中显示的样式不同 - 腾讯云开发者社区

使用Javascript的不同地图样式

在JavaScript中使用不同的地图样式，通常是通过地图API来实现的。以下是一些流行的地图API及其样式的示例：

1. Google Maps API

Google Maps API 提供了多种地图样式选项，可以通过设置 mapTypeId 来选择不同的地图样式。

// 创建地图实例
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapTypeId: 'roadmap' // 可选值：'roadmap', 'satellite', 'hybrid', 'terrain'
});

自定义样式

Google Maps API 还允许你自定义地图样式，通过 styles 属性来设置。

var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  styles: [
    {
      featureType: "landscape",
      stylers: [
        { hue: "#FFBB00" },
        { saturation: 43.400000000000006 },
        { lightness: 37.599999999999994 }
      ]
    },
    {
      featureType: "road.highway",
      stylers: [
        { hue: "#FFC200" },
        { saturation: -61.8 },
        { lightness: 45.599999999999994 }
      ]
    },
    // 更多样式...
  ]
});

2. OpenStreetMap

OpenStreetMap 是一个开源的地图服务，可以通过 Leaflet.js 或其他库来使用。

使用 Leaflet.js

<!DOCTYPE html>
<html>
<head>
  <title>OpenStreetMap Example</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <style>
    #map {
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);
  </script>
</body>
</html>

3. Mapbox

Mapbox 是一个提供自定义地图样式的服务，可以通过 Mapbox GL JS 来使用。

<!DOCTYPE html>
<html>
<head>
  <title>Mapbox Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    #map {
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11', // 可以选择不同的样式
      center: [-74.5, 40],
      zoom: 9
    });
  </script>
</body>
</html>