Continue to explore the map plug-in and try Leaflet: Leaflet is a modern, open-source JavaScript library developed for building mobile-friendly interactive maps. It was developed by a team of professional contributors led by Vladimir Agafonkin, and although the code is only 33 KB, it has most of the functionality of developers to develop online maps.

Designed with simplicity, high performance and usability in mind, Leaflet works efficiently on all major desktop and mobile platforms, taking advantage of HTML5 and CSS3 on modern browsers, while also supporting older browser access. Support for plugin extensions with a friendly, easy-to-use API documentation and a simple, readable source code.

The coordinate system used by Leaflet is wgs84, so there is no need to convert Baidu or Amap. A seemingly good plug-in is called vue2-leafle. Before the official start, download Demo, according to the tutorial it gives, use the npm install command to install some packages that need to be installed, then open Demo, and the effect is amazing!

Test 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

The above is the Demo example, which looks very nice. In the Component under the example folder, there are a bunch of vue files, which are very useful. You can paste and copy them directly in the future.

Start development

First, install the package in your own file directory:

Npm install-save vue2-leaflet

You can directly write a vue file in the Component folder without any configuration in the main. The code is as follows:

<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: {
    'vriptymappings: Vue2Leaflet.Map
    'vMurtilelayer': Vue2Leaflet.TileLayer
    'vMurmarkerships: 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>
.roomlet-fake-icon-image-2x {
  Background-image: url (.. /.. / node_modules/leaflet/dist/images/marker-icon-2x.png)
}
.roomlet-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>

The effect is as follows:

The preliminary results have been achieved.

In the process, I don't know why, but if you turn on Eslint verification, you will report all kinds of errors. I don't even understand how to solve it for undefined variable. But it seems that the template cannot be changed. I have studied Vue for less than a week, and I still don't know how to do a lot of things. )

So choose to close Eslint. In the configuration file build webpack.base.conf.js, comment out some files:

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
      }

After this setting, no errors will be reported. The program runs normally, but those errors still exist. You can remember to modify them if you have the opportunity.

Increase POPUP and map interaction

To make two functions, dragging labels and getting latitude and longitude from the graph: In the HTML code section above, modify the v-marker section to read:

<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>

In the following Script, the Component section adds ’v-popup’: Vue2Leaflet.Popup, add a variable called tmp:

  Components: {
    'vriptymappings: Vue2Leaflet.Map
    'vMurtilelayer': Vue2Leaflet.TileLayer
    'vMurmarkerships: Vue2Leaflet.Marker
    'vPopupports: Vue2Leaflet.Popup
  }

Write two Methods:

  Methods: {
   Markerclicked (item) {
     Window.alert ('this is' + JSON.stringify ('Test'))
   }
   MarkerMoved: function (event, item) {
     This.tmp = event.latlng
   }
}

Modify the page to display the latitude and longitude as follows: