角度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>我已经将相同的样式表和脚本导入到angular中的index.html文件中，然而，当我加载一个组件时，我只得到一个带有红色背景的400px的div占位符，没有任何形状或形式的映射。我是否错误地引用了leaflet的css和脚本文件？
我还尝试将styleUrls: ['https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css']添加到angular组件本身，但没有成功。
另外，您是否可以在index.html中引用两个带有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的版本。
谢谢
回答 2
Stack Overflow用户
发布于 2017-07-12 05:52:27
我使用typescript (angular 2)进行开发，并且我使用官方的javascript and docs。
您只需要使用下面的代码行安装leaflet目录：npm install leaflet。
并在安装后将此导入添加到您的导入中：
import L from "leaflet";最后，您可以使用与leaflet docs相同的leaflet。(只需做一些小改动，看看谷歌)
祝好运。
Stack Overflow用户
发布于 2017-04-25 21:29:05
以这种方式在组件中“常规”使用leaflet是不可能的。例如，您必须使用npm (npm install leaflet)将其加载到您的项目中。
下面是一个很好的教程，介绍如何将其合并到Angular 2应用程序中：https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
https://stackoverflow.com/questions/39512421
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号