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在这里丢失因此，您应该链接到map.css，而不是链接到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会吐出一张混乱的地图？

1 个答案: