Question

我正在尝试在地图上使用自定义样式，但是无论我做什么，我都无法让他们使用。我的初始化函数是：

this.init = (mapSelector, api, title = '', poi = false, prefix = '', cache = true) => {
      return new Promise((r, j) => {
        if (api.slice(-1) !== '/')
          this.setPrefix(prefix);

        this.setCache(cache);
        this.setPOI(poi);
        this.setTitle(title);

        try {
          getMapKey().then(key => {
            if(mapSelector) {
              _map = new Microsoft.Maps.Map(mapSelector, {
                credentials: key,
                center: new Microsoft.Maps.Location(_latitude, _longitude),
                zoom: 13,
                disableBirdseye: true,
                disableStreetside: true,
                showDashboard: false,
                customMapStyle: JSON.parse(sampleStyle),
              });
            } else {
              j('error');
            }
          });
        } catch (error) {
          console.log(error);
        }
      });
    };

它目前可以很好地渲染标准地图。但是无论我传入customMapStyle的内容如何都行不通，但添加了JSON.parse来确保数据为JSON格式，因为我的想法已用完。.我从以下示例中复制了JSON：

https://bingmapsv8samples.azurewebsites.net/#Set%20Custom%20Map%20Style

我尝试使用的某些样式是：

const darkMode = {
  "version": "1.0",
  "settings": {
    "landColor": "#0B334D"
  },
  "elements": {
    "mapElement": {
      "labelColor": "#FFFFFF",
      "labelOutlineColor": "#000000"
    },
    "political": {
      "borderStrokeColor": "#144B53",
      "borderOutlineColor": "#00000000"
    },
    "point": {
      "iconColor": "#0C4152",
      "fillColor": "#000000",
      "strokeColor": "#0C4152"
    },
    "transportation": {
      "strokeColor": "#000000",
      "fillColor": "#000000"
    },
    "highway": {
      "strokeColor": "#158399",
      "fillColor": "#000000"
    },
    "controlledAccessHighway": {
      "strokeColor": "#158399",
      "fillColor": "#000000"
    },
    "arterialRoad": {
      "strokeColor": "#157399",
      "fillColor": "#000000"
    },
    "majorRoad": {
      "strokeColor": "#157399",
      "fillColor": "#000000"
    },
    "railway": {
      "strokeColor": "#146474",
      "fillColor": "#000000"
    },
    "structure": {
      "fillColor": "#115166"
    },
    "water": {
      "fillColor": "#021019"
    },
    "area": {
      "fillColor": "#115166"
    }
  }
};

const sampleStyle = {
  "elements": {
    "park": { "fillColor": "#A9A9D4BE" },
    "controlledAccessHighway": { "fillColor": "#e6c317", "strokeColor": "#D3B300", "labelColor": "#444444", "labelOutlineColor": "#60ffffff" },
    "highway": { "fillColor": "#e6c317", "strokeColor": "#D3B300", "labelColor": "#444444", "labelOutlineColor": "#60ffffff" },
    "water": { "fillColor": "#B7CDDE" },
    "medicalBuilding": { "fillColor": "#fceced" },
    "majorRoad": { "fillColor": "#f0d85a" },
    "education": { "fillColor": "#f0e8f8" },
    "arterialRoad": { "fillColor": "#ffed91" },
    "structure": { "fillColor": "#faf8ed" },
    "buildinglobal": { "fillColor": "#e5e0d8" },
    "forest": { "fillColor": "#deebdd" },
    "vegetation": { "fillColor": "#deebdd" },
    "reserve": { "fillColor": "#deebdd" },
    "street": { "fillColor": "#ffffff", "strokeColor": "#e6e3df" },
    "roadShield": { "fillColor": "#ffffff" },
    "medical": { "fillColor": "#ffddee" },
    "educationBuildinglobal": { "fillColor": "#f6f0f1" },
    "golfCourse": { "fillColor": "#c5dabb" }
  },
  "settings": { "landColor": "#F6F4E3" }
};

有人知道如何激活自定义样式吗？如果那不可能，那我可以激活一种暗模式吗？

谢谢

Answer 1

我建议您看一下地图样式表编辑器应用程序-它可以让您交互式地调整样式，并显示示例代码，说明如何在所有Bing地图控件（HTML，UWP和静态地图）中初始化该样式）。 https://www.microsoft.com/en-us/p/map-style-sheet-editor/9nbhtcjt72ft

Answer 2

我必须设置setOption，它与我尝试应用的地图样式无关。

必应地图-无法设置自定义地图样式

2 个答案: