在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

相关推荐
享誉霸王10 小时前
15、告别混乱!Vue3复杂项目的规范搭建与基础库封装实战
前端·javascript·vue.js·前端框架·json·firefox·html5
滕青山11 小时前
URL编码/解码 核心JS实现
前端·javascript·vue.js
源码获取_wx:Fegn089517 小时前
计算机毕业设计|基于springboot + vue鲜花销售管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
PD我是你的真爱粉17 小时前
Vue Router 4 路由进阶
前端·javascript·vue.js
蓝帆傲亦19 小时前
Vue.js 大数据处理全景解析:从加载策略到渲染优化的完全手册
前端·vue.js·flutter
巴巴博一20 小时前
【前端架构实战】拒绝切 Tab 白屏!纯手写 Vue/uni-app 多标签页“零延迟缓存”列表架构
前端·vue.js·架构
rfidunion1 天前
springboot+VUE+部署(12。Nginx和前端配置遇到的问题)
前端·vue.js·spring boot
vx-Biye_Design1 天前
servlet家政公司管理系统-计算机毕业设计源码01438
java·vue.js·spring·servlet·tomcat·maven·mybatis
用户579854769712 天前
02:Agent Loop 深度剖析:ReAct 循环的工程实现
vue.js
滕青山2 天前
Base64编码/解码 核心JS实现
前端·javascript·vue.js