Почему TomTom API выдает перемешанную карту? - PullRequest
Новая
       22

Почему TomTom API выдает перемешанную карту?

0 голосов
/ 10 марта 2019

Мой тестовый код 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

1 Ответ

1 голос
/ 11 марта 2019

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;
}
...