角度2和小册子地图

2019年7月28日 148次阅读

我在使用角度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的版本.

谢谢

最佳答案 我开发了typescript(angular 2),我使用了官方的javascript传单文档.

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

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

import L from "leaflet";

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

祝好运.

点赞