在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

相关推荐
Awu122733 分钟前
Vue3自定义渲染器:原理剖析与实践指南
前端·vue.js·three.js
进击的野人37 分钟前
Vue.js 插槽机制深度解析:从基础使用到高级应用
前端·vue.js·前端框架
用户40993225021240 分钟前
Vue3 v-if与v-show:销毁还是隐藏,如何抉择?
前端·vue.js·后端
JimmyWhat41 分钟前
Vue单页应用路由404问题:服务器配置与Hash模式解决方案
vue.js
JIngJaneIL1 小时前
基于springboot + vue健康管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·后端
计算机毕设VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue医院挂号管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
快乐星球喂3 小时前
子组件和父组件之间优雅通信---松耦合
前端·vue.js
simon91243 小时前
ElementUI:表格如何展示超出单元格的内容且不影响单元格?
前端·vue.js·element
天外天-亮3 小时前
Vue 中常用的指令
前端·javascript·vue.js
清风细雨_林木木3 小时前
vite与vue的cli的区别
前端·javascript·vue.js