在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

相关推荐
Ruihong3 小时前
Vue v-bind 转 React:VuReact 怎么处理?
vue.js·react.js·面试
前端那点事5 小时前
Vue插槽用法全解析(Vue2+Vue3适配)| 组件复用必备
vue.js
Ruihong6 小时前
Vue v-on 在 React 中 VuReact 会如何实现?
vue.js·react.js·面试
|晴 天|6 小时前
实现草稿自动保存功能:5秒无操作自动保存
前端·vue.js·typescript
广师大-Wzx8 小时前
JavaWeb:前端部分
java·前端·javascript·css·vue.js·前端框架·html
M ? A8 小时前
你的 Vue v-memo 与 v-once,VuReact 会编译成什么样的 React 代码?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
吴声子夜歌9 小时前
Vue3——过度和动画效果
前端·vue.js·es6
zopple9 小时前
前端三剑客 vs Vue.js:核心区别解析
前端·javascript·vue.js
胡志辉的博客9 小时前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
|晴 天|9 小时前
文章系列管理系统:拖拽排序与进度追踪
前端·vue.js·typescript