0

我的 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} );

});

你可以在这个 codepen 上玩它：https ://codepen.io/pnoeric/pen/GevgBN?editors=1111

密码笔

4

1 回答 1

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;
}
于 2019-03-11T10:20:44.513 回答