使用jQuery Leaflet map显示默认地图(世界地图)

时间:2012-02-28 10:28:25

标签: jquery

如果使用传单地图插件没有数据,如何显示简单的默认地图(世界地图)。

1 个答案:

答案 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 &copy; <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归属图层,但是在线托管的任何通用图块层也可以在这里工作。