如何在VUE中使用leaflet地图框架

注：如需转载请标明出处

前言：在leaflet的官方文档只有静态的HTML演示并没有结合VUE的demo  虽然也有一些封装好的leaflet库例如Vue-Leaflet，但是总感觉用起来不是那么顺手，有些业务操作还是得用leaflet的API好用

步骤1：npm install leaflet  （搭建vue项目就跳过了）

页面中先下载好npm包  下一步就是在vue用引用了（以下方法都是网上教程自己整理出来的）

Main.js (也可以在入口的 .vue 页面)

import L from "leaflet";
import "leaflet/dist/leaflet.css";

步骤2：leaflet初始化

HTML

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

JS （注意哦：需要在页面渲染完成后才能执行不然会报错）

initMap() {
      let map = L.map("map", {
        minZoom: 3,
        maxZoom: 14,
        center: [39.550339, 116.114129],
        zoom: 12,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      });
      this.map = map;　　　　//data上需要挂载
      window.map = map;
      L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      ).addTo(map);
    },

 最后补充： div样式需要设置宽高100% 不然会报错

#map {

　　width:100%;

　　height:100vh;

}

 

__EOF__

本文作者：不在沉默着爆发，就在沉默中消亡
本文链接：https://www.cnblogs.com/Hekiss/p/11525965.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！