在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

相关推荐
打瞌睡的朱尤4 小时前
建立vue项目
vue.js
bearpping5 小时前
Spring Boot + Vue 全栈开发实战指南
vue.js·spring boot·后端
儒雅的烤地瓜8 小时前
Vue | 一文详解Vue3中的Setup()函数
vue.js·vue3·vue2·组合式api·setup函数·option api
网络安全学习库8 小时前
很喜欢Vue,但还是选择了React: AI时代的新考量
vue.js·人工智能·react.js·小程序·aigc·产品经理·ai编程
.生产的驴9 小时前
Vue3 超大字体font-slice按需分片加载,极速提升首屏速度, 中文分片加载方案,性能优化
前端·vue.js·windows·青少年编程·性能优化·vue·rescript
Hello--_--World10 小时前
VUE3:基础篇官网笔记
前端·vue.js·笔记
我是伪码农10 小时前
vue复习
前端·javascript·vue.js
cch891810 小时前
易语言VS VUE:编程工具终极对决
前端·javascript·vue.js
一 乐11 小时前
鲜花商城|基于springboot + vue鲜花商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·鲜花商城系统
IT东11 小时前
Vue 多环境部署全解析:解决测试与生产一致性难题
前端·javascript·vue.js