leaflet——入门(一)

leaflet地图简单使用

在微信小程序中，嵌入H5页面，最终需求实现加载手绘图、景点展示、规划路线等相关功能，后续有时间会持续更新相关内容。

leafletjs

安装并注册组件

可以使用以下2两方式，或者局部注册组件方式，根据个人调整

全局注册

// 安装
npm i leaflet -S

// 在main.js中注册组件
import Leaflet from 'leaflet'
import "leaflet/dist/leaflet.css"
Vue.use(Leaflet);

html引入文件

<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.min.css" rel="stylesheet">
  
<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.7.1/leaflet.js"></script>

使用

html

这里样式写行内

<template>
	<div id="map" style="width: 100vw; height: 100vh">
      	
	</div>
</