首页 > 其他 > 详细

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

时间:2019-09-16 11:41:18      阅读:235      评论:0      收藏:0      [点我收藏+]

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

步骤1:npm install leaflet  (搭建vue项目就跳过了)

页面中先下载好npm包  下一步就是在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);
    },

 

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

原文:https://www.cnblogs.com/zhonglinke/p/11525965.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!