Внешние библиотеки прекрасно работают в файле .html, но не в проекте квазара - PullRequest
Новая
       15

Внешние библиотеки прекрасно работают в файле .html, но не в проекте квазара

0 голосов
/ 21 октября 2019

Я пытаюсь переместить свой код в файле .html в проект Quasar. Код прекрасно работает, когда я запускаю свой HTML-файл, но получаю ошибки от Quasar. Вот мой исходный код в файле index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neshan Map Example (Leaflet)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
    <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>
</head>
<body>

<div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;"></div>

<script type="text/javascript">
    var myMap = new L.Map('map', {
        key: 'myKey',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        center: [36.320378,59.571256],
        zoom: 14
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', 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>'}).addTo(myMap);
    var marker = L.marker([36.320378,59.571256]).addTo(myMap);
    var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');
    popup.openPopup();
</script>
</body>
</html>

Ниже приведен код моего index.vue: 

<template>
  <q-page class="flex flex-center">
    <link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
    <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>
    <div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;">></div>
  </q-page>
</template>

<script type="text/javascript">
    var myMap = new L.Map('map', {
        key: 'myKey',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        center: [36.320378,59.571256],
        zoom: 14
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', 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>'}).addTo(myMap);
    var marker = L.marker([36.320378,59.571256]).addTo(myMap);
    var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');
    popup.openPopup();
</script>

Я получил эту ошибку из браузера:

Шаблоны должны отвечать только за сопоставление состояния с пользовательским интерфейсом. Избегайте размещения тегов с побочными эффектами в ваших шаблонах, таких как <script>, поскольку они не будут анализироваться

Я также попробовал это: 

<template>
  <q-page class="flex flex-center">
    <link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
    <div id="map" style="width: 600px; height: 450px; background: #eee; border: 2px solid #aaa;">></div>
  </q-page>
</template>

<script type="text/javascript">
    import * as Vue2Leaflet from 'vue2-leaflet'
    var myMap = new L.Map('map', {
        key: 'myKey',
        maptype: 'dreamy',
        poi: true,
        traffic: false,
        center: [36.320378,59.571256],
        zoom: 14
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', 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>'}).addTo(myMap);
    var marker = L.marker([36.320378,59.571256]).addTo(myMap);
    var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');
    popup.openPopup();
</script>

Даже если я не наденуНе получите никаких ошибок из кода выше, карта не отображается в браузере. Что я делаю не так?

...