Angular 2 和传单地图

Question

Angular 2 和传单地图

我无法在 angular 2 中使用传单地图。在记事本中，我编写了以下代码来创建一个简单的地图：

<head>
    <title>Experiment maps</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
</head>
<body>

<div id="map" style="height: 400px; background: #919191;"></div>

<script>
    var map = L.map('map').setView([54.5833300, -5.9333300], 13);   

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
        attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a   

href="http://mass.gov/mgis">MassGIS</a>',
         maxZoom: 17,
         minZoom: 9
        }).addTo(map);
</script>

<h1>map</h1>

</body>

Run Code Online (Sandbox Code Playgroud)

我已经将相同的样式表和脚本以 angular 格式导入到 index.html 文件中，但是，当我加载一个组件时，我只得到一个 400px 的 div 占位符，红色背景，没有任何形状或形式的地图。我是否错误地引用了传单的 css 和脚本文件？

我也尝试添加styleUrls: ['https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css']到角度组件本身，但没有成功。

另外，您是否可以在 index.html 中引用 2 个样式表，使用 rel="stylesheet"，如下所示：

 <link rel="stylesheet" href="styles.css">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-   rc.3/dist/leaflet.css" />

Run Code Online (Sandbox Code Playgroud)

我试过删除我原来的 style.css 并只留下 leftlet 的版本。

谢谢

Answer 1

Bun*_*nut 1

不可能以这种方式在组件内以“常规”方式使用传单。您必须使用 npm 将其加载到您的项目中，例如 ( npm install leaflet)。

这是一个关于如何将其合并到 Angular 2 应用程序中的很好的教程： https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/

归档时间：	9 年，2 月前
查看次数：	7719 次
最近记录：	6 年，7 月前