在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

相关推荐
丁婷婷2 小时前
Reflect 在 Vue3 响应式中的作用是什么?
vue.js
吃西瓜的年年2 小时前
vue3原理思维导图
vue.js·笔记·flutter
Z小明2 小时前
第 1 章 Vite 项目初始化
前端·vue.js
合橱瑰3 小时前
Vue3 与 ElementPlus 前端常见错误修复实践
前端·vue.js
风之舞_yjf3 小时前
Vue基础(35)_全局事件总线(GlobalEventBus)
前端·vue.js
程序员小八7773 小时前
后端转全栈:前端思维转变(Vue 视角)
前端·vue.js·状态模式
宿6743 小时前
vue3-vite
前端·vue.js
单线程_0112 小时前
从案例分析 Vue3 Tokenizer 源码一
前端·javascript·vue.js
liangshanbo121515 小时前
Vue 3 <script setup> 的本质原理是什么?它与普通 setup()有何区别?
前端·javascript·vue.js
ji_shuke20 小时前
Vue 3 使用 History 哨兵和 popstate 拦截浏览器返回
前端·javascript·vue.js·history·哨兵·popstate