Leaflet笔记(1)最简单的入门程序——显示地图

时间: 2017年02月20日阅读: 6,483 分类: Leaflet学习笔记标签: Leaflet, Leaflet入门

本文目录

正文

本文实现Leaflet的最基本的功能，在web中加载地图。实现步骤如下:

1.引入Leaflet文件

在<head>中加入如下代码：

<link rel="stylesheet" href="./static/css/leaflet.css">
<script src="./static/js/leaflet.js"></script>

2.创建地图显示div

在<body>中加入如下代码：

<div id="map-container"></div>

需要给这个div外加一个样式

<style>
  #map-container {
    width: 600px;
    height: 400px;
  }
</style>

3.显示地图

在<script>中加入如下代码：

var m = L.map('map-container').setView([36.52,120.31], 7);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  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(m);