在vue中如何使用leaflet图层展示地图

在vue中如何使用leaflet

复制代码
<template>
  <div id="map" class="map">
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  mounted(){
    this.initMaps()
  },
  methods: {
    initMaps () {
      const map = L.map('map', {
        zoomControl: false,
        attributionControl: false
      }).setView([39.9042, 116.4074], 10);
      L.tileLayer('https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',).addTo(map)
    },
  }
}
</script>

<style lang="less" scoped>
.map{
  height: 100%;
  width: 100%;
}
</style>

参考文档链接: leaflet

相关推荐
Zhencode6 小时前
Vue3响应式原理之ref篇
vue.js
小疙瘩7 小时前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
独泪了无痕7 小时前
useStorage:本地数据持久化利器
前端·vue.js
呆子小木心9 小时前
Vue2或Vue3项目引用百度地图
javascript·vue.js·typescript·前端框架·html5
UI设计兰亭妙微11 小时前
资金运营管理监控系统交互设计、UI设计及VUE开发
vue.js·ui·交互
王子肥波11 小时前
🚀 TabTab Admin:一款现代化的 Vue 3 后台管理系统模板
vue.js
白开水丶12 小时前
vue3源码学习(五)ref 、toRef、toRefs、proxyRefs 源码学习
前端·vue.js·学习
不想秃头的程序员13 小时前
Vue3 子传父全解析:从基础用法到实战避坑
前端·vue.js·面试
简单Janeee14 小时前
[Vue 3 从零到上线]-第三篇:网页的指挥官——指令系统 (v-if, v-for, v-bind, v-on)
前端·javascript·vue.js
前端程序猿i14 小时前
第 7 篇:性能优化 —— 大量消息下的流畅体验
前端·vue.js·性能优化