如何在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;

}

巴特西

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

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

最新文章

热门文章