leaflet的引入

最新推荐文章于 2025-03-30 09:17:35 发布

终归墟

最新推荐文章于 2025-03-30 09:17:35 发布

阅读量2.5k

点赞数

分类专栏： leaflet的使用历程文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/s_9527_s/article/details/123426739

版权

leaflet的使用历程专栏收录该内容

7 篇文章

订阅专栏

本文介绍了JavaScript库Leaflet的引入方法，包括cdn和npm两种方式。cdn引入时，需将代码添加到HTML，创建地图容器并初始化。npm方式下，首先通过npm安装Leaflet，然后在main.js中引用，同样创建地图容器并初始化，运行项目即可查看效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Leaflet - a JavaScript library for interactive mapshttps://leafletjs.com/进入后也许页面是这样的（简介）

点击这里就可以查看文档了

常用的两种引入方式，cdn和npm

一、cdn引入

1.复制一下代码到html中

<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>

2.创建一个展示地图的容器并设置显示样式

<!-- 容器样式 -->
<style>
    #map {
		width: 800px;
		height: 500px;
		border: 1px solid red;
	}
</style>
<!-- 容器 -->
<div id="map"></div>

3.初始化地图并展示

// 实例化一个地图对象 将实例对象挂载到map这个容器上 
var newmap = L.map('map', { //map为容器的id名
	center: [51.505,-0.09], //中心点的经纬度
	zoom: 3 ,//地图的缩放大小
})   
//添加切片图层到地图中
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {//切片图层
		    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',//属性文本
	}).addTo(newmap);//添加到地图中

4.经过上面这一步，就可以在页面中查看效果了

二、npm 方式

1. npm install leaflet

下载完后可以在package.json中查看是否有 leaflet 和 leaflet.pm

2.在main中引用

import Vue from 'vue'
import App from './App.vue'

// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'


Vue.config.productionTip = false;
Vue.L = Vue.prototype.$L = L

/* leaflet icon图标 */
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
})

2.同上，在页面中创建容器，并设置容器样式

<template>
    <!-- 容器 -->
    <div id="map"></div>
</template>
<script></script>
<!-- 容器样式 -->
<style>
    #map {
		width: 800px;
		height: 500px;
		border: 1px solid red;
	}
</style>

3.初始化地图并展示

data: function() {
	return {
		map: '',
    }
},
mounted() {
	this.init()
},
methods: {
	init() {
        // 实例化一个地图对象 将实例对象挂载到map这个容器上
        this.map = L.map('map', {//map为容器的id名
			center: [39.904989, 116.405285],//中心点的经纬度
			zoom: 3,//地图的缩放大小
		})
        //添加切片图层到地图中
		let name = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {//切片图层
			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'//属性文本
		}).addTo(this.map);//添加到地图中
    }
}

4.运行项目，查看效果