三步自制在线地图-基于Leaflet的Helloworld案例

已于 2022-03-26 15:26:11 修改
阅读量1.7k 收藏
点赞数
文章标签： 在线地图
于 2022-03-26 11:52:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjjsd195/article/details/123753255
版权

想自己做一个在线地图吗，其实只需要三步就能完成，先看看实际效果吧：

 

这个可以在电脑看，也可以在手机看，下面时手机效果：

 

那具体怎么做呢 ，只需要三步：

第一步：用记事本新建一个空白txt文档，另存为hello.html，然后用记事本打开。

第二部：将下面的代码拷贝进去，保存。

<IDOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!— Load Leaflet from CDN —>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
			integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
			crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
			integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
			crossorigin=""></script>
<title>Map Online</title>
</head>
<body>
<div id="map" style="height:100%;"/></div>
</body>
<script>
	var map = L.map("map").setView([30.56486,114.353622 ],10);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}',{foo:'bar'}).addTo(map);
</script>
</html>

第三步，用浏览器打开这个页面，就可以啦。

稍微解释一下，这个页面用了leaflet的cdn源，所以必须联网才可以使用，是地道的在线地图。

当然了，因为这个实际上就是个html页面，所以你想在手机浏览的话，可以先复制文件到手机，然后用手机浏览器打开就可以啦。

我把这个文件放在了阿里云服务器上，就可以向百度地图一样输入网址打开，如果想这么做的小伙伴，可以先在云服务器商家买一个服务器，然后放上去就可以用了。具体就不展开讲了，感兴趣可以留言。

Intimes
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
字典查询（部分）
myth_HG的专栏
05-28 14万+
#include #include #include using namespace std; const int enMax=46; const int chMax=256; const int attrMax = 66; const int spaceMax = 100; const int inputMax = 30; char atrrSum[13][attrMax]= {"n.","
基于leaflet.js实现修改地图主题样式的流程分析
10-15
总结来说，修改Leaflet.js地图主题样式的过程包括：选择或开发合适的插件（如`leaflet-tilelayer-colorizr`），理解插件的工作原理，解决可能出现的跨域问题，以及编写自定义的`colorize`函数来实现颜色转换。...
用C语言写一个查单词的小demo
m0_47068593的博客
07-03 4万+
用C语言写一个查单词的小demo #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) { // 用只读的方式打开我们的单词库 FILE *fp = fopen("dict.txt","r"); if (NULL == fp){ perror("fopen"); return -1
使用Leaflet库创建交互式地图：技术解析与实践
chenchuang0128的博客
06-14 424
Leaflet是一个基于HTML5和CSS3的开源JavaScript库，用于在Web上制作交互式地图。它使用现代的、前端友好的方式进行开发，支持多种地图源（如OpenStreetMap、Mapbox等），并且可以与各种插件无缝集成，扩展其功能。Leaflet的主要特点包括：轻量级：Leaflet的核心代码非常小巧，易于集成到现有项目中。高度可定制：开发者可以根据需要自定义地图的外观和行为。交互性强：支持多种交互方式，如缩放、拖动、点击等。插件丰富：拥有庞大的插件生态系统，可以轻松扩展地图功能。
网络编程_8(项目附件)
weixin_38717634的博客
01-13 3万+
dict.txt abandonment n.放弃 abbreviation n.缩写 abeyance n.缓办，中止 abide v.遵守 ability n.能力 able adj.有能力的，能干的 abnormal adj.反常的，变态的 aboard adv.船(车)上 abolish v.废除，取消 abolition n.废除，取消 abortion n.流产 abortive adj.无效果的，失败的 about prep.关于，大约 ab
简单英译汉SQL脚本
热门推荐
shencomd的专栏
10-19 19万+
create table t_dictionary(word varchar(200), trans varchar(1000)); insert into t_dictionary values('abandon','v.抛弃，放弃'); insert into t_dictionary values('abandonment','n.放弃'); insert into t_dictionary
leaflet-windy，leaflet插件集成高德地图，风场粒子动画
06-21
首先，`leaflet-windy`是一个基于Leaflet的地图插件，它专门用于展示风向和风速信息，通过粒子动画的方式让风场动态可见。Leaflet是一个轻量级的JavaScript库，广泛用于创建交互式地图应用。通过`leaflet-windy`，...
georaster-layer-for-leaflet:在传单地图上显示GeoTIFF和其他类型的栅格
05-13
在传单地图上显示GeoTIFF和其他类型的栅格 安装 npm install georaster-layer-for-leaflet GeoRaster前提条件 GeoRasterLayer要求首先将输入转换为GeoRaster格式。 您可以使用以下命令安装GeoRaster： npm install ...
leaflet-search:在传单地图中搜索内容
04-14
npm install --save leaflet-search 选项 选项 默认 描述 网址 '' 通过ajax请求进行搜索的网址，例如：“ search.php？q = {s}”。 可以用作返回字符串以进行动态参数设置的函数 层 空值 搜索标记所在的图层（是L....
LeafLet离线地图案例demo集合非常详细
12-28
在“LeafLet离线地图案例demo集合非常详细”这个压缩包中，你将找到一系列关于如何使用LeafLet创建离线地图的示例。这些案例涵盖了各种功能和应用场景，包括但不限于以下几点： 1. **基本地图显示**：学习如何加载...
基于python开发的居民区电动汽车TOPSIS有序充电仿真+源码解析+项目文档+仿真（毕业设计&课程设计&项目开发）
08-06
基于python开发的居民区电动汽车TOPSIS有序充电仿真+源码解析+项目文档+仿真，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 项目简介： "Simulation.md" 为代码解析说明文档 "仿真过程.py" 为仿真过程代码 "cargo.txt" 为随机生成的电动汽车出行数据，格式为[离开时间，回来时间，是否出行，剩余电量百分比]，其中是否出行 1表示出行，0表示不出行 "cargo.py" 为生成电动汽车出行数据代码 "carimf.txt" 为电动汽车信息初始化数据，格式为[序号，电池容量，慢充时间，最大行驶里程，慢充每15分钟增加电量百分比] "price.txt" 为时间价格表，格式为[时间，时段，电价]，其中，时段1表示峰时，时段2表示谷时，时段3表示平时 "drawpic.py" 为绘图函数 "小区居民日常负荷数据.txt" 为通过蒙特卡洛方法生成的小区居民日常负荷数据，格式为[时间，负荷]
【流程管理】LTC流程介绍.pptx
08-06
【流程管理】LTC流程介绍.pptx
libmavsdk-server.so-debug-202408062018-wk-proto-ok
08-06
libmavsdk_server.so_debug_202408062018_wk_proto_ok
信息安全lsClssify-mas笔记
08-06
信息安全lsClssify-mas笔记
ROS小车复刻资源整理
08-06
ROS小车复刻资源整理 包含复刻过程中需要的所有文件，以及自己复刻过程中的记录，如果复刻还有什么问题，欢迎积极讨论交流啊…… 复刻记录： 2024年7月5日 购买元件和配件、购买工具、打印外壳和PCB、开钢网 2024年7月10日 整理工具和元件及配件：发现缺少LED（0603）、排插4P（雷达使用） 2024年7月15日 元件到位，准备焊接，发现加热台使用不熟练、锡膏已经干了没有助焊剂、焊接效果不好、后面尝试时连焊严重、钢网涂锡膏时没有固定导致锡膏涂的太多，需要提升自己的焊接技术。（钢网可以定制成PCB板形状的更好用） 2024年7月16日 准备先放弃一段时间、复习考研。然后有时间再进行。后续可购买更好的工具（烙铁和热风枪、助焊剂、清洗剂等等、以及中低温锡膏）、打印沉金的PCB板、重新打印钢网、以及部分元件。 2024年7月22日 购买的焊接好的PCB板到货，因为插反电池，导致PCB内部损坏电池供电无法使用 收获：学会了导入、编译、烧录esp32的程序 学会分析pcb图和电路故障初步分析 学会插件的接线方式。 准备寒假再继续搞！！ 可以先学一些简单的pcb制作（电子DIY）
毕业设计，基于ASP+ACCESS开发的酒店房间预约系统，内含完整源代码，数据库，毕业论文
08-06
毕业设计，基于ASP+ACCESS开发的酒店房间预约系统，内含完整源代码，数据库，毕业论文 随着计算机技术的飞速发展，信息时代的到来，信息改变了我们这个社会。各类行业在日常经营管理各个方面也在悄悄地走向规范化和网络化。酒店客房管理的信息化程度体现在将计算机及网络与信息技术应用于经营与管理，以现代化工具代替传统手工作业。无疑，使用网络信息化管理使酒店客房管理更先进、更高效、更科学，信息交流更迅速。 酒店房间预约系统是酒店经营管理中不可缺少的部分，它的内容对于经营的决策者和管理者来说都至关重要,所以酒店房间预约系统应该能够为用户提供充足的信息和快捷的预约手段。酒店预约基本都是需要通过电话或客户直接到酒店进行，由于预约记录多是人为完成，容易造成失误和遗漏，管理效率比较低，特别是顾客比较多的季节，传统的预约方式已经基本不能满足要求。 远程预约系统是一种全新的网络预约方式，通过互联网突破了时间和空间限制实现了便捷快速的预约与管理功能。本系统具有房间信息查询、预约房间和取消预约等功能。
[毕业设计]VB+ACCESS计算机等级考试成绩统计与分析系统(源代码+论文+答辩PPT).zip
最新发布
08-06
[毕业设计]VB+ACCESS计算机等级考试成绩统计与分析系统(源代码+论文+答辩PPT)
毕业设计，基于ASP+ACCESS开发的动态网站，内含完整源代码，数据库，论文答辩，毕业论文
08-06
毕业设计，基于ASP+ACCESS开发的动态网站，内含完整源代码，数据库，论文答辩，毕业论文 【摘 要】 随着网络日益深入社会生活，以电子商务网站作为对外的展示窗口，进行内外信息交流，已成为大众的迫切需要。网站信息管理系统是典型的信息管理系统(MIS),其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的数据库。而对于后者则要求应用程序功能完备,易使用等特点。使用MACROMEDIA公司的Dreamweaver MX制作页面，用ASP语言做连接数据库的程序，使用Access制作系统的数据库，做一个具有留言版、登入页面等信息网站。 【关键词】Dreamweaver 应用、信息管理系统、ASP(Active Sever Pages)
vue-leaflet实现卫星离线地图
06-03
要在Vue应用中使用离线卫星地图，可以使用Vue-Leaflet插件。Vue-Leaflet是一个基于Leaflet的Vue组件库，它提供了易于使用的地图组件和丰富的交互功能。 以下是实现步骤： 1. 安装Vue-Leaflet插件 使用npm或yarn安装Vue-Leaflet插件： ``` npm install vue2-leaflet leaflet --save ``` 2. 准备离线卫星地图 可以使用Mobile Atlas Creator（MAC）或TileMill等工具来制作离线地图。这些工具可以将在线地图切片下载到本地，并将其转换为MBTiles或其他格式，以便在Web应用程序中使用。 3. 添加离线地图到Vue-Leaflet 在Vue组件中引入`LMap`和`LTileLayer`，并将其放置在模板中： ``` <template> <l-map :zoom="zoom" :center="center"> <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer> </l-map> </template> <script> import { LMap, LTileLayer } from 'vue2-leaflet' export default { components: { LMap, LTileLayer }, data() { return { zoom: 13, center: [51.505, -0.09], url: 'path/to/offline/map/{z}/{x}/{y}.png', attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors' } } } </script> ``` 在`url`中指定离线地图切片的路径，`attribution`用于显示地图数据的来源。 4. 运行应用程序 使用`npm run serve`或`yarn serve`命令启动应用程序，即可在浏览器中查看离线卫星地图。 以上是基本的实现步骤，你可以根据自己的需求进行定制和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Intimes

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值