在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

相关推荐
老华带你飞13 小时前
作业管理|基于Java作业管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·后端
JIngJaneIL13 小时前
基于Java人力资源管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
幸运小圣13 小时前
defineAsyncComponent【Vue3】
前端·javascript·vue.js
大猩猩X14 小时前
vxe-gantt vue table 甘特图子任务多层级自定义模板用法
vue.js·甘特图·vxe-table·vxe-ui
EveryPossible1 天前
google搜索框
vue.js
小飞侠在吗1 天前
vue computed 和 watch
前端·javascript·vue.js
毕设十刻1 天前
基于Vue的考勤管理系统8n7j8(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
CPU NULL1 天前
Vue 3 前端调试与开发指南
前端·javascript·vue.js
老华带你飞1 天前
社团管理|基于Java社团管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
十一.3661 天前
83-84 包装类,字符串的方法
前端·javascript·vue.js