在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

相关推荐
E***q5392 小时前
Vue增强现实开发
前端·vue.js·ar
4***14902 小时前
Vue代码规范详解
javascript·vue.js·代码规范
梦想CAD控件3 小时前
AI生成CAD图纸(云原生CAD+AI让设计像聊天一样简单)
前端·javascript·vue.js
诸葛亮的芭蕉扇4 小时前
tree组件点击节点间隙的异常问题分析
前端·javascript·vue.js
不努力也不会混5 小时前
vite联邦实现微前端(vite-plugin-federation)
前端·vue.js
Heo5 小时前
原来Webpack在大厂中这样进行性能优化!
前端·javascript·vue.js
涔溪5 小时前
Vue2 项目中通过封装 axios 来同时连接两个不同的后端服务器
前端·vue.js·axios
q***38519 小时前
SpringBoot + vue 管理系统
vue.js·spring boot·后端
喵个咪9 小时前
go-kratos-admin 快速上手指南:从环境搭建到启动服务(Windows/macOS/Linux 通用)
vue.js·go
用户841794814569 小时前
vxe-gantt table 甘特图如何设置任务视图每一行的背景色
vue.js