nuxt+高德地圖實現多邊形區域檢索

我已經放棄百度地圖了，爲何呢？

緣由一： 百度地圖api太亂不容易查閱

緣由二： 百度給出的案例太少，可參考項太少

第三點也是最重要的，百度地圖花錢，百度地圖花錢，百度地圖花錢，

很榮幸，做爲國內惟一免費開源大型好用的高德地圖成爲個人第二個採坑對象。

 

說說我爲何用nuxt：其實出於私心，我想調研一下nuxt的seo，踩踩nuxt的坑，熟悉一些框架工做流程，以便於後續項目開發；

還有一點是我想把地圖抽離出來，來知足公司的各類業務。

好吧，進入正題：

 

 

首先，安裝nuxt框架：

 npx create-nuxt-app gaode-map

安裝時會有一些選項，我是以下選擇的：

 

接着安裝一些須要的依賴，scss和axios:

sass安裝

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

而後能夠在assets下建一個scss文件，以下：

而後在nuxt.config.js引入該文件：

這樣就能用scss了，把全部的scss文件導入到index.scss文件中

 

axios導入：

官方給了方法

 

那如何經過自定義配置axios呢？在plugins新建axios.js文件，寫入以下代碼：

import Vue from 'vue'
import axios from 'axios'

//中間能夠寫配置項


Vue.prototype.$axios = axios

 

而後你應該懂得了

 

 

更改服務端口號：

在nuxt.config.js添加以下配置：

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

 

 

接下來來步入正題，導入高德地圖

 

這個有不少種方式，這裏介紹兩種：

1，全局導入，在nuxt.config.js 里加script標籤，將路徑和key放在後邊(注意要寫在head對象裏邊，相似原生結構)

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

2.我採用的是這種方式，異步加載地圖,除此以外，這種的好處是能夠分塊加載。我是在plugins目錄下新建一個js文件，就叫aMap.js吧，而後寫一個類，做爲地圖的註冊

export default function MapLoader() {
    return new Promise((resolve, reject) => {
        // 全局對象若是存在地圖直接將結果拋出
        if (window.AMap) {
            resolve(window.AMap)
        } else {
            // 建立script標籤並放入cdn連接
            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 = () => {
            // 注入相關插件
            window.AMap.plugin(['AMap.ToolBar', 'AMap.CircleEditor', 'AMap.PolyEditor'], function () {
                //異步同時加載多個插件
                var toolbar = new AMap.ToolBar();
                map.addControl(toolbar);
            });
            // 將結果拋出
            resolve(window.AMap)
        }
    })
}

而後就能夠在組件中調用該類了：

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('地圖加載失敗'，error)

　　})

}

接下來開始搭建地圖頁面，先來講一下思路，前端負責調用地圖組件，畫不規則圖形，把圖形上的點的經緯度給後端，後端查詢出該區域裏全部的小區返回給前端，這裏先接受前端拿到多邊形的點經緯度

 

前端在初始化地圖後，在地圖裏實例化多邊形的函數添加到地圖，而後點擊按鈕觸發編輯多邊形事件，大體代碼以下

<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">
        <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 {
      num: 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)
    // 縮放地圖到合適的視野級別
    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
      console.log('選中的區域',arr)
        // event.target 即爲編輯後的多邊形對象
    })

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

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

效果以下：

 

 能夠看出前端已經拿到了點座標（後續功能持續更新）