在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

相关推荐
代码煮茶6 小时前
Vite 5.0 新特性深度解析:更快、更干净、更未来的前端构建利器
vue.js
Pu_Nine_910 小时前
IntersectionObserver 详解:封装 Vue 指令实现图片懒加载
前端·javascript·vue.js·性能优化
前端那点事11 小时前
Vue nextTick 超全解析|作用、使用场景、底层原理、Vue2/Vue3区别
前端·vue.js
前端那点事11 小时前
Vue面试高频:子组件能直接修改父组件数据吗?单向数据流原理+正确写法全覆盖
前端·vue.js
前端那点事11 小时前
为什么 Vue 的 template 标签不能用 v-show?底层机制+踩坑复盘+生产级解决方案
前端·vue.js
北风toto12 小时前
为什么 IntelliJ IDEA Community 无法开发 Vue?——附解决方案
java·vue.js·intellij-idea
跟着珅聪学java13 小时前
Element UI 的 Tabs 标签页开发教程
javascript·vue.js·elementui
jiayong2314 小时前
前端面试题库 - Vue框架篇
前端·vue.js·面试
三*一14 小时前
Mapbox GL JS 前端多边形分割实战:从踩坑到优雅实现
开发语言·前端·javascript·vue.js
xChive14 小时前
前端请求取消:用 AbortController 从 fetch 到 axios
前端·vue.js·axios·fetch·abortcontroller