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 maph2>
    <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:'© OpenStreetMap 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
   }
 }

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

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