leaflet自定义地图（非地理地图）

最新推荐文章于 2023-11-14 17:46:44 发布

MYNAMEL

最新推荐文章于 2023-11-14 17:46:44 发布

阅读量1.9k

点赞数

分类专栏：前端 leaflet 文章标签： leaflet 前端

本文链接：https://blog.csdn.net/mynamel/article/details/122231017

版权

本文介绍了如何使用Leaflet库来创建非地理地图，即不在地球坐标系中的虚拟地图。内容包括非地理地图的定义、文件夹结构、HTML与JS代码示例，以及如何加载自定义背景图。教程中提到，Leaflet的使用方法可以参照官方文档。

摘要由CSDN通过智能技术生成

地理地图：现实世界的地图
啥叫非地理地图？真实世界不存在的地图
一般我们的地图不都是以地球上的坐标啊，建筑啊来参考的嘛（经纬度）
但是比如说吃鸡，cf这种地图就不在地球上，不能用地理地图来显示，这个时候，我们就要自定义一个地图，懂？

非地理地图代码和相关背景图

文件夹结构

在这里插入图片描述

html代码

head里面的link和script是官网给的，就这么照抄就行了
body里面的div就是你的地图位置，你可以在网页中任何位置加载该地图
div里面的style是控制你的地图在页面中显示的窗口大小
div地下的script就是你自己定义的js

<html>

<head>
    <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>
    <!-- <style type="text/css">
            #map { height: 180px; }
        </style> -->

    <script src="js/jQuery.js"></script>
</head>

<body>
    <div id="map" style="width: 1500px;height: 850px;"></div>
    <script

最低0.47元/天解锁文章

MYNAMEL

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
leaflet自定义地图（非地理地图）

地理地图：现实世界的地图啥叫非地理地图？真实世界不存在的地图一般我们的地图不都是以地球上的坐标啊，建筑啊来参考的嘛（经纬度）但是比如说吃鸡，cf这种地图就不在地球上，不能用地理地图来显示，这个时候，我们就要自定义一个地图，懂？非地理地图代码和相关背景图文件夹结构html代码<html><head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.c.
复制链接

扫一扫

专栏目录