角度2和小册子地图

发布时间：2020-12-17 17:07:53 所属栏目：安全来源：网络整理

导读：我在使用角度2工作的传单地图时遇到了麻烦.在记事本中,我编写了以下代码来创建一个简单的地图： head titleExperiment maps/title link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" / script src="https://unpkg.com/le

我在使用角度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所示相同的传单.
(稍微修改看谷歌)

祝好运.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!