Question

我在使用角度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>

我已经将相同的样式表和脚本导入到angular.html的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" />

我尝试删除原来的style.css并离开leftlet的版本。

由于

Answer 1

我在typescript（angular 2）中开发，我使用了官方的javascript传单文档。

您只需要使用以下行安装传单目录： npm install leaflet。

并在导入后添加此导入后添加：

import L from "leaflet";

最后你可以使用与leaflet docs所示相同的传单。（稍微修改看谷歌）

祝你好运。

Answer 2

不能使用传单＆＃39;常规＆＃39;这种方式在组件内的方式。您必须使用npm（例如npm install leaflet）将其加载到项目中。

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

Angular 2＆amp;传单地图

2 个答案: