leaflet创建简单地图

一、leaflet介绍:

1.Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。

2.Leaflet设计坚持简便、高性能和可用性好的思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。

官网:http://leafletjs.com/

二、快速入门

1.在html页面头部加入CSS file 和JavaScript file

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

2.在body里面定义一个层

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

3.加入js代码来实现地图的显示

 1 <script type="text/javascript">
 2             var mymap = L.map(‘mapid‘).setView([35.5,104.6],9);
 3             L.tileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png‘, {
 4                 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>‘,
 5                 maxZoom: 18,
 6             }).addTo(mymap);
 7             var marker = L.marker([35.5,104.6]).addTo(mymap);
 8             var circle = L.circle([35.5,104.8], {
 9                 color: ‘red‘,
10                 fillColor: ‘#f03‘,
11                 fillOpacity: 0.5,
12                 radius: 500
13             }).addTo(mymap);
14             var polygon = L.polygon([
15                 [35.5, 104.3],
16                 [35.5, 104.4],
17                 [35.5, 104.5]
18             ]).addTo(mymap);
19</script>

下面我来一一介绍一下js代码中所用到的几个函数及其里面的参数:

map方法:实例化了<DIV>元素的DOM对象ID的地图和一个可选的对象文字与地图选项。

  参数:他的第一个参数可以是一个id也可以是一个html元素,后面的可选参数就不在这里做一一介绍了。

setView方法:设置地图的视图(地理中心和缩放)与给定的动画选项。

  参数:第一个参数是地理位置的纬度和经度。通过这个地理位置的经纬度将会在地图页面打开时显示在页面的中心位置。

     第二个参数是设置可缩放值。后面的可选参数就不做介绍了。

tileLayer方法:用于在地图上加载和显示瓷砖层

  参数:第一个参数是一个url:{s}代表可选的子领域,连续的被用来帮助浏览器并行请求每个域的限制。子领域值可在后面的选项中指定。a或b或c,在默认情况下可省略。

      后面好多可选的参数就不在这里一一指定了。

后面的marker、circle、polygon方法分别是用来在地图上添加标记,圆和多边形的。

时间: 2024-10-13 07:43:13

leaflet创建简单地图的相关文章

使用Leaflet创建地图拓扑图

之前我们采用过 Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一种古老项目,略显臃肿,面向更新的前端地图方案,在客户的介绍下,我们找到了leaflet - 基于HTML5的轻量地图客户端方案,结合Qunee使用,以及第三方插件,实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件,作者在乌克兰,在移动设备上的有良好的体验,比较新和现代的地图客户端,类库压缩后只有33k,非常小巧,这一点让qunee都相形见绌,先看一个leaflet的入

google maps js v3 api教程(1) -- 创建一个地图

原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前,我们进入 Google Developers Console创建一个key,用于我们开发地图的身份验证(当然,没有key也可以进行接下来的教程) 创建一个简单的地图: <!DOCTYPE html> <html> <head> <title>Simple Ma

10个可创建交互式地图的免费JavaScript工具

概述:随着互联网的快速发展,越来越多的行业需要在自己的网页里来创建地图信息,让客户可以快速的定位来获得各种信息,今天在这里给大家推荐10个免费的JavaScript工具来创建交互式地图,希望对有不同需求的朋友都能够带来帮助! 在这里,我们提出了10个 JavaScript库的完整列表,创建交互式和个性化地图.不过,也有谷歌地图制作工具和其他工具来构建地图,但在这个平台,我们特别提出只可以用来显示特殊的地图标记的JavaScript库. Geocomplete 最新的jQuery插件,封装了谷歌地

SharePoint 创建站点地图树视图及格式枚举截图

SharePoint 创建站点地图树视图及格式枚举截图 SharePoint首页隐藏掉左侧导航以后,如果要以树视图呈现网站地图也很简单. 只需要复制v4.master,粘贴出v4_copy(1).master,签出,编辑.直接修改v4.master母版页是不明智的. 在PlaceHolderLeftNavBar中插入树视图.点击小三角,在选择数据源下拉列表新建数据源. 选中站点地图,指定ID为SiteMapDataSource,点击确定. F12在浏览器中预览. 回到SPD,点击树视图小三角,点

HTML5创建高德地图

创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"

CocoStudio 创建简单UI资源并添加到工程

打开CocoStudio UI编辑器新项目,设置画布480*320, 添加一个标签和一个按钮控件 导出项目,生成所需要的资源文件, 复制到cocos2d工程Resources目录下 加入代码: 头文件: #include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT; using namespace ui; 加载cocostudio资源创建控件 _touchgroup = TouchG

IOS 创建简单表视图

创建简单表视图 此实例主要实现UITableViewDataSource协议中必须要实现的两个方法tableView:numberOfRowsInSection: 和tableView:cellForRowAtIndexPath: 当表视图显示的时候会发出tableView:numberOfRowsInSection:消息询问当前节中的行数. 当表视图单元格显示的时候会发出tableView:cellForRowAtIndexPath:消息为单元格提供显示数据. 一.实现的时序图,如下: 二.示

CocoStudio 创建简单UI资源并加入?到project

打开CocoStudio UI编辑器新项目,设置画布480*320, 加入?一个标签和一个button控件 导出项目,生成所须要的资源文件, 拷贝到cocos2dprojectResources文件夹下 添?代码: 头文件: #include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT; using namespace ui; 载入cocostudio资源创建控件 _touchgro

使用Visual Studio创建简单的自定义Web Part 部件属性

使用Visual Studio创建简单的自定义Web Part 部件属性 自定义属性使用额外的选项和设置拓展你的Web part部件.本文主要讲解如何使用Visual Studio创建简单的自定义Web Part 部件属性. 1. 打开Visual Studio,点击文件--新建项目--空白SharePoint项目CustomWPProperties.部署为场解决方案. 2. 右击项目添加新项Web Part部件WPPropertyExample,点击添加. 3. 右击WPPropertyExa