为什么 TomTom API 会吐出一张乱七八糟的地图？

Question

我的 TomTom 测试代码生成了一张混乱的地图：

为什么？！这是代码...

HTML:

<link rel="stylesheet" type="text/css" href="https://themepark.com/public/tomtom-jssdk-4.47.6/mapbox-gl-js/mapbox-gl.css">
<script src="https://themepark.com/public/tomtom-jssdk-4.47.6/tomtom.min.js"></script>

<div id='map_canvas'></div>

Javascript:

document.addEventListener( 'DOMContentLoaded', function( event ) {

    var start_latitude = 50.720990653711, start_longitude = 18.89588147113, start_zoom=5;

    // draw initial map
    var map = tomtom.L.map( 'map_canvas', {
        key: 'apikey',
        source: 'raster',
        basePath: 'http://themepark.com/public/tomtom-jssdk-4.47.6',
        center: [start_latitude, start_longitude],
        zoom: start_zoom,
    } );

  // if we can, try to locate user - this is a one-time action, and will update the map view
    map.locate( {setView: true, maxZoom: 15} );

});

你可以在这个代码笔上玩所有的东西：https://codepen.io/pnoeric/pen/GevgBN?editors=1111

Answer 1

此处缺少

map.css 所以你应该 link 到 map.css

而不是 link 到 mapbox-gl-js/mapbox-gl.css

记得设置一些宽度和高度#map_canvas

<head>
    <link rel="stylesheet" type="text/css" href="https://themepark.com/public/tomtom-jssdk-4.47.6/map.css">
    <script src="https://themepark.com/public/tomtom-jssdk-4.47.6/tomtom.min.js"></script>
</head>
<body>
    <div id='map_canvas'></div>
</body>

和css：

#map_canvas {
  height: 300px;
  width: 300px;
}

为什么 TomTom API 会吐出一张乱七八糟的地图？

Why does the TomTom API spit out a jumbled map?

dictionary

tomtom