可视化开发(1)——leaflet的基本使用方法

1.创建vue3项目(详情百度,可省略)

2. 下载leaflet组件依赖:

npm install leaflet --save

3.引入依赖:

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

4.初次使用

<template>
  <div id="map"></div>    //注意该div需要给width和height
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const initMap = () => {
  let map = L.map('map').setView([114, 30], 6) //设置中心点&缩放
  let marker = L.marker([114.297203, 30.681118]).addTo(map) //添加图标
  marker.bindPopup('<b>我是一个点击弹窗</b>')//图标点击展示信息
}
onMounted(() => {
  initMap()
})
</script>