洗掉谷歌地圖示簽-有解無憂

我想使用 JS API 從 Google 地圖中洗掉所有街道名稱和其他地點。

我只需要一張沒有標簽的地圖。

我嘗試添加 v3 Maps API 的 Styled Map 功能以洗掉標簽，但它僅在我洗掉 mapId 并且在洗掉 mapId 后傾斜和旋轉不起作用時才有效。

代碼片段：

/**
 * @license
 * Copyright 2021 Google LLC.
 * SPDX-License-Identifier: Apache-2.0
 */
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
    styles: [{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]}],
  });
  
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()   amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()   amount);
        break;
      default:
        break;
    }
  };
}



window.initMap = initMap;

我怎樣才能實作它？

uj5u.com熱心網友回復：

當我運行發布的代碼時，我收到一條錯誤訊息：

Google Maps JavaScript API：當 mapId 存在時，無法設定地圖的樣式屬性。當存在 mapId 時，地圖樣式通過云控制臺進行控制。請參閱洗掉谷歌地圖示簽

代碼片段（修改 mapId 樣式以洗掉標簽）：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "1328f4a9138013ba",
  });

  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function(mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()   amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()   amount);
        break;
      default:
        break;
    }
  };
}



window.initMap = initMap;

html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

    body {
      font-family: arial;
      font-size: 13px;
    }

<!DOCTYPE html>
<html>

<head>
  <title>remove labels from map</title>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer></script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/514742.html

標籤：javascript谷歌地图谷歌地图 api-3

上一篇：用變數設定谷歌原始搜索框地址

下一篇：lateinit屬性mMap尚未初始化mMap