如果使用传单地图插件没有数据,如何显示简单的默认地图(世界地图)。
答案 0 :(得分:1)
根据Quick Start Guide,确保在文档的"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-less": "^3.1.0",
"gulp-sourcemaps": "^2.1.1",
"gulp-typescript": "^3.0.2",
"gulp-uglify": "^2.0.0",
"uglify-js-harmony": "^2.6.2"
中包含Leaflet CSS
<head>
并包含对Leaflet JavaScript文件的调用,通常位于<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
标记内的末尾
<body>
并将 <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
元素放在您希望地图的位置。在这种情况下,您可以使用以下内容显示没有数据的世界地图。
<div>
<div id="mapid" style="width: 600px; height: 330px;"></div>
<script>
var mymap = L.map('mapid').setView([40, 0], 1);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
</script>
是lat / lon setView([40,0],
是缩放级别(全世界)
1);
之后的所有内容都只引用了一个基本的图块层,在这种情况下是一个来自Mapbox的CC归属图层,但是在线托管的任何通用图块层也可以在这里工作。