Vue項目使用Vue2Leaflet插件實現地圖顯示

簡介

vue是一個漸進式javascript框架，用來快速構建網頁項目，在vue框架之上結構化leaflet地圖庫的產物vue2leaflet可以在vue項目中很方便的加載地圖，下面簡單介紹一個vue2leaflet加載地圖的過程。

第一個地圖顯示頁面

第一步：新建vue項目

第二步：安裝Vue2Leaflet

在項目目錄下運行如下代碼

npm i vue2-leaflet -S

實測項目還需安裝leaflet

npm install --save leaflet

第三步： 新建VueLeaflet.vue

在components文件夾中新建vue文件VueLeaflet.vue

在template標簽下增加如下內容，顯示地圖，並增加一個marker

<div class="vue-leaflet">
    <l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker">
        <l-popup :content="text"></l-popup>
      </l-marker>
    </l-map>

  </div>

在script標簽，name之下增加如下內容

data () {
    return {

    }
  }

第三步：修改路由

修改index.js，將helloworld修改為vueleaflet

第四步：引入組件

在vueleaflet.vue的script標簽下增加如下內容（注意合並部分）

import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
import L from 'leaflet'
export default {
  name: 'VueLeaflet.vue',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup
  },
  data () {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> Haut-Gis-Org',
      marker: L.latLng(47.413220, -1.219482),
      text: 'this is a marker'
    }
  }
}

第五步：引入css

在main.js中添加

import 'leaflet/dist/leaflet.css'
import L from 'leaflet'

第六步：修改icon路徑

在main.js中添加如下代碼

/* 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')
})

效果展示

項目地址

完成這個項目花費了一些精力，故將項目源碼分享在了github上

GitHub