在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

相关推荐
Man1 小时前
🔥 Vue3 动态 ref 黑科技:一招解决 v-for 中的组件引用难题!
前端·vue.js
叫我少年1 小时前
Vue3 集成 VueRouter
vue.js
披萨心肠1 小时前
Vue单向数据流下双向绑定父子组件数据
vue.js
接着奏乐接着舞。1 小时前
3D地球可视化教程 - 第3篇:地球动画与相机控制
前端·vue.js·3d·threejs
正在走向自律1 小时前
RSA加密从原理到实践:Java后端与Vue前端全栈案例解析
java·前端·vue.js·密钥管理·rsa加密·密钥对·aes+rsa
LuckySusu1 小时前
【vue篇】Vue 数组响应式揭秘:如何让 push 也能更新视图?
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 性能优化神器:keep-alive 深度解析与实战指南
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 核心机制揭秘:为什么组件的 data 必须是函数?
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 响应式陷阱:动态添加对象属性为何不更新?如何破解?
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 异步更新之魂:$nextTick 原理与实战全解
前端·vue.js