如何无需登录嵌入Mapbox地图 解决地图显示不详细问题

• 你当前使用的是HERE地图的JS SDK，并非Mapbox SDK，无法实现Mapbox原生地图的显示效果
• 现有代码缺失地图交互、UI模块依赖，未给地图容器设置明确高度，也未初始化交互逻辑，会导致地图加载不全、无法进行缩放拖拽操作
• Mapbox嵌入的地图默认不需要访问用户登录，仅需要开发者配置访问令牌即可，令牌可设置域名白名单避免被盗用，普通用户打开页面就能直接查看地图，不需要任何登录操作

自定义JS实现（支持灵活扩展功能） #

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
    <style>
        * { margin: 0; padding: 0; }
        #mapContainer { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
    <script>
        // 替换为你自己申请的Mapbox access token
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
        const lat = 22.719568;
        const lng = 75.857727;
        const map = new mapboxgl.Map({
            container: 'mapContainer',
            // 使用Mapbox原生街道样式，匹配常规地图显示效果
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [lng, lat],
            zoom: 10
        });
        // 加载指定坐标点的标记
        new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);
        // 添加缩放、视角调整控件，匹配原生地图交互体验
        map.addControl(new mapboxgl.NavigationControl());
    </script>
</body>
</html>

iframe静态嵌入（无需编写复杂JS，开箱即用） #

如果不需要自定义复杂交互，直接用iframe嵌入即可，不需要额外开发逻辑：

<iframe
  width="100%"
  height="100%"
  frameborder="0"
  src="https://api.mapbox.com/styles/v1/mapbox/streets-v12.html?title=false&access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA&zoom=10&center=75.857727,22.719568"
  allowfullscreen>
</iframe>

• 上述两种实现方式，普通用户访问时都不需要登录，打开页面即可直接查看、操作地图
• 注意：上述iframe中使用的是Mapbox官方演示令牌，存在访问频率限制，正式上线前请替换为自己申请的令牌
• 如果坚持使用原有HERE地图SDK，需要补充加载交互、UI模块的JS文件，同时初始化事件监听和UI控件，才能正常显示完整地图内容，但渲染风格和Mapbox存在差异，无法达到你预期的显示效果

内容的提问来源于stack exchange，提问作者cocolocozoco