Leaflet入门之地图显示
来源:互联网 发布:手机调音量软件 编辑:程序博客网 时间:2024/06/06 08:55
leaflet是领先的开源JavaScript库为移动设备设计的互动地图。重33 KB的JS,所有映射大多数开发人员所需要的特性。
leaflet设计简单,性能和可用性。它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的、易读的源代码,是一个快乐作出贡献。
官网:http://leafletjs.com/
本文实现Leaflet的最基本的功能,在web中加载地图。实现步骤如下:
1,引入Leaflet所需文件:
<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>
2,在body中创建用于显示地图的div
<div id="map-container"></div>
需要给div设置宽度、高度
<style> #map-container { width: 100%; height: 500px; }</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 © <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);</script>
注:这段代码需要写在div下面,不然会报错—— Map container not found.4,打开浏览器,查看效果
说明:上述加载的是Mapobx的图层,关于MapBox的内容请看:http://malagis.com/leaflet-note-2-use-mapbox.html
参考博客:http://malagis.com/leaflet-note-1-easy-start.html
<
阅读全文
0 0
- Leaflet入门之地图显示
- 【leaflet】地图显示、标记、图层切换
- leaflet加载百度地图
- leaflet.js 开发地图
- leaflet加载百度地图
- 【一】地图 Leaflet 起步
- D3 + Leaflet入门
- react+leaflet入门Demo
- Leaflet 地图中绘制多边形
- leaflet限制地图拖动范围
- Vue.js使用Leaflet地图
- 地图组件Leaflet地图偏移问题
- 百度地图之显示地图
- 【leaflet】 leaflet移除地图上所有marker(layers)
- 【leaflet】 leaflet移除地图上所有marker(layers)
- leaflet扩展之identifyControl
- leafLet之API翻译
- leaflet加载百度地图(矫正篇)
- HttpClient连接超时及读取超时
- unit7
- Face The Right Way
- 动态规划-122. Best Time to Buy and Sell Stock II
- hdu 1531(差分约束)
- Leaflet入门之地图显示
- 例题6-8 二叉树的递归遍历 uva548
- 编辑联系5
- Lucene查询数据的相关度排序问题
- 十八岁的我们
- Portlet 通信(四) 利用事件传递参数
- Face Recognition(face_recognition) Using Hadoop Streaming API
- Nginx源码编译安装
- 最近收集的中科院研究生教学视频