在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

相关推荐
星_离14 小时前
《Vue 自定义指令注册技巧:从手动到自动,效率翻倍》
前端·vue.js
光影少年14 小时前
Vue的响应式原理?Vue2和Vue3有什么区别?
前端·vue.js·掘金·金石计划
wuhen_n15 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js
wuhen_n15 小时前
TypeScript 深度加持:让你的组合式函数拥有“钢筋铁骨”
前端·javascript·vue.js
滕青山16 小时前
基于 ZXing 的 Vue 在线二维码扫描器实现
前端·javascript·vue.js
踩着两条虫17 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(五):创建 H5 移动应用
前端·vue.js·ai编程
踩着两条虫17 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(二):快速入门
前端·vue.js·ai编程
小黑的铁粉19 小时前
vue中怎么监测一个div的宽度变化
vue.js
SuperEugene19 小时前
Vue3 + Element Plus 全局 Message、Notification 封装与规范|Vue生态精选
前端·javascript·vue.js
青青家的小灰灰20 小时前
拒绝 Prop Drilling 与隐式耦合:Vue 组件通讯的全景指南与最佳实践
前端·javascript·vue.js