在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

相关推荐
无聊的老谢9 小时前
Vue 3 + TypeScript 构建大型电信运维平台的前端架构设计
前端·vue.js·typescript
薛先生_09911 小时前
vue-路由重定向
前端·javascript·vue.js
吠品13 小时前
PyTorch 踩坑:libtorch_cpu.so 找不到 iJIT_NotifyEvent 符号
前端·vue.js·elementui
xiaofeichaichai13 小时前
Vue 响应式原理
前端·javascript·vue.js
丑八怪大丑13 小时前
前端工程化
vue.js
前端 贾公子14 小时前
uni-app工程化实战:基于vue-i18n和i18n-ally的国际化方案 (上)
前端·javascript·vue.js
无聊的老谢16 小时前
Web GIS 最佳实践:Vue 集成 Leaflet/OpenLayers 实现基站海量点位渲染
前端·javascript·vue.js
老毛肚19 小时前
jeecgboot TS + Vue 模板化 03
前端·javascript·vue.js
FlyWIHTSKY19 小时前
React 19 + Next.js 16(App Router)项目中集成 MSW
开发语言·javascript·vue.js
2401_8685347820 小时前
常见的 vue面试题目
前端·javascript·vue.js