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>

效果如下：

 

 可以看出前端已經拿到了點坐標（后續功能持續更新）