在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 分钟前
Monorepo 架构管理多个子项目实现
前端·javascript·vue.js·pnpm·monorepo
guojb8247 分钟前
从0开始设计一个树和扁平数组的双向同步方案
前端·数据结构·vue.js
前端小趴菜059 分钟前
Vue项目,前端如何来做登录密码加密传输?
前端·javascript·vue.js
xuankuxiaoyao31 分钟前
VUE.JS 实践 第三章
前端·javascript·vue.js
تچ快乐杂货店يچ35 分钟前
基于前后端分离的在线考试系统(微服务架构 + RBAC权限 + AI助手)
java·vue.js·spring boot·spring cloud·微服务·架构·typescript
慧一居士1 小时前
Vue项目中使用的首选的依赖库如VueUse等,使用场景和使用示例介绍
前端·vue.js
Irene19911 小时前
getter 和 方法的区别(数据属性和访问器属性,Vue 3 中,computed 和 getter 的关系和区别)
javascript·vue.js·computed·getter
计算机学姐1 小时前
基于SpringBoot+Vue的智能民宿预定游玩系统【AI智能客服+数据可视化】
java·vue.js·spring boot·后端·mysql·spring·信息可视化
二月夜2 小时前
Vue项目打包为WAR文件部署Tomcat完整指南
前端·vue.js·tomcat
终端鹿2 小时前
Vue3 核心 API 完结篇:toRaw / markRaw / shallowReactive / shallowRef 等进阶响应式 API 详解
前端·javascript·vue.js