在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

相关推荐
蜡台8 分钟前
Node 版本管理器NVM 安装配置和使用
前端·javascript·vue.js·node·nvm
李剑一1 小时前
数字孪生大屏必看:Cesium 3D 模型选中交互,3 种高亮效果拿来就用!
前端·vue.js·cesium
浮笙若有梦3 小时前
我开源了一个比 Ant Design Table 更好用的高性能虚拟表格
前端·vue.js
清空mega5 小时前
《Vue Router 与 Pinia 入门:页面跳转、动态路由、全局状态管理一篇打通》
前端·javascript·vue.js
踩着两条虫5 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(十):物料系统之内置组件库
前端·vue.js
大鸡爪6 小时前
Vue3 组件库实战(五):Icon 图标组件的设计与实现
前端·vue.js
大鸡爪6 小时前
Vue3 组件库实战(七):从本地到 NPM:版本管理与自动化发布指南(下)
前端·vue.js
qq_406176146 小时前
详解Vue中的计算属性(computed)和观察属性(watch)
开发语言·前端·javascript·vue.js·前端框架
米丘7 小时前
vue-router 5.x 关于 RouterLink 实现原理
前端·javascript·vue.js