在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 小时前
vue 加入购物车抛物线动画
前端·javascript·vue.js
计算机学姐2 小时前
基于微信小程序的图书馆座位预约系统【uniapp+springboot+vue】
vue.js·spring boot·微信小程序·小程序·java-ee·uni-app·intellij-idea
镜宇秋霖丶4 小时前
2026.5.8@霖宇博客制作中遇见的问题
前端·vue.js·elementui
花归去6 小时前
vue3中 function getText(){} 、 const getText=()=>{} ;区别在哪里,优缺点
javascript·vue.js·ecmascript
web行路人7 小时前
前端对Commands(斜杠命令)一些常用
前端·javascript·vue.js·vue
饺子不吃醋7 小时前
深入理解 Vue 3 的 setup(含 Composition API)
前端·vue.js
UXbot9 小时前
AI画原型工具如何帮非设计师快速生成UI界面
前端·vue.js·ui·kotlin·swift·原型模式·web app
invicinble11 小时前
前端框架使用vue-cli( 第二层:工程配置层--4.axios需要做的基础配置)
前端·vue.js·前端框架
MXN_小南学前端11 小时前
Vue + Element UI 分页器封装:比直接用 el-pagination 更省心的通用方案
javascript·vue.js·elementui