javascript - 在 php 页面中使用 Leaflet map
问题描述
我正在寻找免费地图作为谷歌地图的替代品,以便在我的网站上使用。当我搜索时,我发现了传单。参考教程,我尝试在本地主机中创建一个简单的地图。但它的加载空白。我是第一次使用传单。我的代码中有什么遗漏吗?谁能帮我..?提前致谢。
这是我的代码:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
</script>
</body>
</html>
解决方案
您需要将切片图层添加到地图并尝试使用最新的传单版本之一,例如 1.3.3。此外设置这样的高度:
#map{ height: 500px }
试试这个
var map = L.map('map').setView([43.64701, -79.39425], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
#map {
height: 500px
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet@1.3.3/dist/leaflet.js
'></script>
<div id="map"></div>
推荐阅读
- python - Python:寻找更快、更不准确的 sqrt() 函数
- neo4j - 使用条件边类型遍历 neo4j 图
- excel - 使用宏插入查找公式
- java - 如何创建没有中心的 JavaFX BorderPane?
- javascript - 离子地理位置类型错误
- c# - Firebase Unity:OrderByChild().StartAt().EndAt() 不返回任何内容
- python - 如何将表单提交重定向到另一个视图
- c - 如何在没有字符串函数的情况下将新字符串分配给 char 数组
- python - 不可散列的类型:停用词的“列表”错误
- matlab - Matlab 中的 repmat 函数不能始终如一地工作?