在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 小时前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李6 小时前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
其美杰布-富贵-李9 小时前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
嘟嘟07179 小时前
useRef + Web Worker:React 中的耗时计算不卡页面
javascript·vue.js
万敏9 小时前
Vue3 全栈实战第五周:Vitest 单元测试从零搭建实战记录
vue.js·node.js·全栈
sugar__salt12 小时前
跟着 Demo 学 Pinia:两种仓库写法 + 完整 TodoList 复现
前端·javascript·vue.js·前端框架·vue
A242073493016 小时前
Vue + TypeScript 请求数据后结合 Element UI 实现树形菜单与下拉选择
vue.js·ui·typescript
java1234_小锋16 小时前
Vue3专题 - 条件渲染
前端·javascript·vue.js
鸽鸽17 小时前
Vue 3 API 完全指南:从 Options 到 Composition 的进阶之路
前端·vue.js
肉肉不吃 肉17 小时前
无渲染组件和组合式函数
前端·javascript·vue.js