二维地图插件leaflet的使用

最新推荐文章于 2024-03-01 15:42:44 发布

m0_61177996

最新推荐文章于 2024-03-01 15:42:44 发布

阅读量715

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_61177996/article/details/126316710

版权

这篇文章讲述的是vue中绘制二维地图，插件leaflet的使用方法

1、首先要先下载依赖

命令是：npm install leaflet

2、可能你的地图在多个地方用也可能就在一个地方用可以选择性的在你的入口文件main.js或者你所需要的组件中局部引用

两种的引入方式是一样的

import 'leaflet/dist/leaflet.css'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from 'leaflet'
Vue.L = Vue.prototype.$L = L

下边的这句话是为了解决你的marker上图片正常显示的问题

/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
})

3、初始化的全部代码组件

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

<script>
export default {
  data() {
    return {
        map: ""
    };
  },
  mounted() {
    this.initDate();
  },
  methods: {
    initDate() {
      this.map = L.map("map", {
        center: [39.1435690, 110.45732], // 地图中心
        zoom: 14, //缩放比列
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false // 移除右下角leaflet标识
      });
      let name = L.tileLayer(
        "http://mt0.google.cn/vt/lyrs=y@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga",
      ).addTo(this.map);
    //   this.map.removeLayer(name)  // 移除图层
    }
  }
};
</script>

<style lang="stylus" scoped>
#map {
  width: 100%;
  height: calc(100vh);
  z-index: 1;
}
</style>

好了上面就是简单的使用了，有疑问可以留言呦！