Листовка Карты не отображаются - PullRequest
Новая
       1

Листовка Карты не отображаются

0 голосов
/ 14 ноября 2018

Я бы хотел сохранить javascript во внешнем файле.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

    <title>Map</title>    
</head>
<body>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js">
    </script> -->
    <div id="mapid"></div>
    <script src="client.js"></script>
</body>
</html>

А это файл js 

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2RlYmFkcmkiLCJhIjoiY2ptcjh1YmNlMXluajNxcDU0b3NrOWowbiJ9.kGcSMPD0cZyz0tLOTIIilw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

Может кто-нибудь помочь мне понять, что происходит не так?Я создал jsfiddle (насколько я понимаю).Но не повезло и там!https://jsfiddle.net/vxb0ces9/

1 Ответ

0 голосов
/ 15 ноября 2018

CSS в вашем JSFiddle выглядит следующим образом: 

#mapid {
  height: 400 px;
  width: 600 px;
}

Длина CSS должна быть указана без пробела между числом и единицей: (выделено мной)

Формат значения длины [...]: (с десятичной точкой или без нее) , за которым сразу следует идентификатор единицы (например, px, em и т. Д.).).

Поэтому в вашем случае просто исправьте свой CSS следующим образом: 

#mapid {
  height: 400px;
  width: 600px;
}

... решит вашу проблему: https://jsfiddle.net/hym0bo9p/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...