leaflet 初始化地图

最新推荐文章于 2024-05-14 19:57:14 发布

Xiaozezeze

最新推荐文章于 2024-05-14 19:57:14 发布

阅读量738

点赞数

分类专栏： leaflet 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49157566/article/details/125217284

版权

leaflet 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.创建一个div

 <div id="map"></div>

2.设置div样式
3.在data中使用map

data () {
    return {
      map:''
    }
  }

4.在mounted中初始化地图

init1() {
  this.map = L.map("map", {
    center: [31.6, 108.5],
    zoom:  5,
    maxZoom: 20,
    minZoom: 3,
    zoomControl: false,
    attributionControl: false,
  });
//添加想要展示的地图模板
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);