Мой тестовый код TomTom создает беспорядочную карту:

enter image description here

Почему?! Вот код ...

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

codepen

0
Eric 10 Мар 2019 в 19:57

1 ответ

Лучший ответ

Здесь отсутствует map.css. Поэтому вместо ссылки на mapbox-gl-js / mapbox-gl.css вы должны ссылаться на map.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;
}
1
szogoon 11 Мар 2019 в 10:20