nuxt + to achieve high moral map polygon area search

I've given up Baidu map, and why?

One reason: Baidu maps api too messy not easy inspection

Two reasons: Case Baidu given too little, too little can reference items

Third and most important, Baidu maps to spend money, spend money to Baidu map, Baidu map to spend money,

It was honored as the only free and open source easy to use large high moral map become my second pit mining objects.

 

Why talk about my nuxt: In fact, for selfish reasons, I would like to research what nuxt of seo, Caicai nuxt pit familiar with some of the workflow framework in order to facilitate subsequent project development;

There is one point I want to map pulled out to meet the company's various businesses.

Well, that is entered:

 

 

First, install nuxt framework:

 npx create-nuxt-app gaode-map

There will be some options during installation, I was selected as follows:

 

Then install dependencies, scss and axios required:

sass installation

npm i scss-loader node-scss --save-dev

You can then build a scss file in the assets, as follows:

The file is then introduced in nuxt.config.js:

So you can use scss, and to import all the files to the index.scss file scss

 

axios import:

The official gave methods

 

That how custom configuration axios it? In the new plugins axios.js file, write the following code:

Vue Import from  ' VUE ' 
Import Axios from  ' Axios ' 

// CI intermediate can write


Vue.prototype. $ Axios = axios

 

Then you should know the

 

 

Change the service port number:

Adding follows nuxt.config.js:

server: {
    port: 8989, // default: 3000
    host: '0.0.0.0', // default: localhost,
  }

 

 

Next to come to the question, imported high moral map

 

There are many ways this, introduce two here:

1, the global import, in nuxt.config.js Riga script tag, and the key on the rear path (note the write head inside the object, similar to the native structure)

script: [
      {src: "https://webapi.amap.com/maps?v=1.4.15&key=your key"}
    ]

2. I used this way, asynchronous loading maps, in addition, that the benefits can block loaded. I was new in the plugins directory a js file, called aMap.js it, and then write a class, registered as a map

Export default function The MapLoader () {
     return  new new Promise ((Resolve, Reject) => {
         // global object map if there is a direct result of the throw 
        IF (window.AMap) {
            resolve(window.AMap)
        } The else {
             // create a script tag and placed cdn link 
            var script = document.createElement ( ' script ' )
            script.type = 'text/javascript'
            script.async = true
            script.src = 'http://webapi.amap.com/maps?v=1.3&key=your key&callback=initAMap'
            script.onerror = reject
            document.head.appendChild(script)
        }
        window.initAMap = () => {
             // injection related widget 
            window.AMap.plugin ([ ' AMap.ToolBar ' , ' AMap.CircleEditor ' , ' AMap.PolyEditor ' ], function () {
                 // asynchronously simultaneously load multiple plug- 
                var Toolbar = new new AMap.ToolBar ();
                map.addControl(toolbar);
            });
            // The result throws 
            resolve (window.AMap)
        }
    })
}

Then you can call this class in the assembly:

import MapLoader from "@/plugins/aMap.js";

mounted() {

　　let that = this;

　　MapLoader().then(AMap => {

　　　　that.map = new AMap.Map("container", {

　　　　center: [118.02, 39.63],

　　　　zoom: 13

　　}).catch(error => {

　　　　console.log ( 'map fails to load', error)

　　})

}

Then begin to build the map page, first look for ideas, front-end components responsible for calling the map, draw an irregular shape, the latitude and longitude points on the graph to the back-end, back-end check out the area where all the cells back to the front here get to accept the distal end point of the polygon Coordinates

 

After initializing the front map, the map is instantiated inside a polygon function added to the map, and then click the button to trigger the event polygon editing, roughly following code

<template>
  <div class="index">
    <div>
      <el-button class="btn" @click="polyEditor.open()" style="margin-bottom: 5px">开始编辑</el-button> 
      <el-button class="btn" @click="polyEditor.close()">结束编辑</el-button> 
    </div>
    <div class="main">
      <div class="store-list">
        Selected coordinates <h3> </ h3>
        <div v-for="(item, index) in alreadeArr" :key=index>
          {{item}}
        </div>
      </div>
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import MapLoader from "@/plugins/aMap.js";
export default {
  data() {
    return {
      a: 0 ,
      polyEditor: {},
      alreadeArr: []
    };
  },
  mounted() {
    let that = this;
    MapLoader().then(AMap => {
      that.map = new AMap.Map("container", {
        center: [118.02, 39.63],
        zoom: 13
      });

     

    var path = [
        [118.134005, 39.6339],
        [118.130915, 39.629607],
        [118.122575, 39.630397],
        [118.132575, 39.640397]
    ]

    var polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF", 
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: '#1791fc',
        zIndex: 50,
    })

    that.map.add(polygon)
    // zoom the map to the right visual field level 
    that.map.setFitView ([polygon])

    that.polyEditor = new AMap.PolyEditor(that.map, polygon)
    // 拖拽点后触发
    that.polyEditor.on('adjust', function(event) {
      let arr = []
      let point = polygon.getPath()
      point.forEach(el => {
        arr.push({"lat": el.lat, "lon": el.lng})
      })
      that.alreadeArr = arr
      the console.log ( ' selected area ' , ARR)
         // event.target is the polygon objects edited 
    })

    });
  },
  methods: {
 
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#container {
  width: 1400px;
  height: 900px;
  margin: 0 auto;
  box-shadow: 0 0 10px #ccc;
}
</style>

Results are as follows:

 

 It can be seen that the front end point coordinates have been given a (follow-up function constantly updated)