Vue.js使用Leaflet地图

继续探索地图插件，想试试Leaflet：

Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，虽然代码仅有 33 KB，但它具有开发人员开发在线地图的大部分功能。

Leaflet设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

Leaflet用的坐标系是wgs84，所以不需要转换百度或者高德地图。

我找到一个看似还不错的插件，叫做vue2-leafle，在正式开始之前，我下载了Demo，按照它给的教程，使用npm install命令安装了一些多需要安装的包。然后打开Demo，效果非常惊艳！

测试Example

# Run demo at localhost:8080$ npm link$ cd examples$ npm link vue2-leaflet$ npm install# serve with hot reload at localhost:8080$ npm run dev

上述就是Demo示例，看起来挺不错的。在example文件夹下的Component中，有一堆vue文件，很有用，以后可以直接粘贴抄袭……

开始开发

首先安装包在自己的文件目录下：

npm install -save vue2-leaflet

不需要做任何的main中的配置，直接可以在Component文件夹中写一个vue文件。代码如下

<template>  <el-row>  <h2>Simple map</h2>    <p>Marker is placed at {{ marker }}</p>  <el-card >    <div id="top_div">      <v-map :zoom="zoom" :center="center">        <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>        <v-marker :lat-lng="marker"></v-marker>      </v-map>    </div>  </el-card></el-row></template><script>import Vue2Leaflet from 'vue2-leaflet';export default {  name: 'example',  components: {    'v-map': Vue2Leaflet.Map,    'v-tilelayer' :Vue2Leaflet.TileLayer,    'v-marker': Vue2Leaflet.Marker  },  data () {    return {      zoom:15,      center: [31.2304, 121.4737],      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',      marker: [31.2304, 121.4737],    }  }}</script><style>.leaflet-fake-icon-image-2x {  background-image: url(../../node_modules/leaflet/dist/images/marker-icon-2x.png)}.leaflet-fake-icon-shadow {  background-image: url(../../node_modules/leaflet/dist/images/marker-shadow.png)}#top_div {  overflow-x: auto;  top: 0;  right: 0;  left: 0;  bottom: 0;  height: 500px;  width: 100%}</style>

得到的效果是这样的：

初步的效果已经实现了。

在这个过程中，我不清楚为什么，但是如果你开着Eslint验证，会报各种错误，我现在都不明白为undefined variable怎么解决……但是似乎模板是不能改的。（我学Vue的时间还不到一周，很多东西都依然不会啊……）

所以……我选择了关闭Eslint，在配置文件build\webpack.base.conf.js中，注释掉部分文件：

  module: {    rules: [      //{      //  test: /\.(js|vue)$/,      //  loader: 'eslint-loader',      //  enforce: "pre",      //  include: [resolve('src'), resolve('test')],      //  options: {      //    formatter: require('eslint-friendly-formatter')      //  }      //},      {        test: /\.vue$/,        loader: 'vue-loader',        options: vueLoaderConfig      },

这样设置以后：不会报错了，程序运行正常，但是那些错误还是存在的，有机会回头修改一下……

增加popup和地图交互

想要做出能够拖拽标号以及从图中取得经纬度这两个功能：

在上边的html代码部分，修改v-marker部分为：

<v-marker :lat-lng="marker"  v-on:l-click="markerclicked(item)" v-on:l-move="markerMoved($event, item)" draggable="true">  <v-popup content="Hello World"></v-popup></v-marker>

在后边的Script里，Component部分加上’v-popup’: Vue2Leaflet.Popup，加入一个叫做tmp的变量：

  components: {    'v-map': Vue2Leaflet.Map,    'v-tilelayer' :Vue2Leaflet.TileLayer,    'v-marker': Vue2Leaflet.Marker,    'v-popup': Vue2Leaflet.Popup  },

写两个Method：

  methods: {   markerclicked(item) {     window.alert('this is ' + JSON.stringify('Test'));   },   markerMoved: function(event, item) {     this.tmp = event.latlng   } }

这样就行了，修改一下页面，显示经纬度，如下：

我尝试直接点击地图获得坐标，但目前失败了，研究的还不够深啊。