最近想測試一下地圖外掛，就先試了一下引用高德地圖，鑑於我主要在學習Node.js和Vue.js，所以先找了一下高德地圖的Vue外掛，vue-amap，這個外掛很不錯的一點就是，有一個不錯的文件。

具體使用方法並不難：

首先需要去高德地圖申請一個Key，以後的所有資料資源都是由Key值獲得的，我沒太認真看，但是我懷疑和百度一樣，如果你的網站訪問量過多，有太多的人檢視地圖，高德就會來找你收錢了……

然後再Main.js檔案中(src資料夾下)新增即行程式碼：

import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
  key: 'XXXXXXXXXXXXXXXXXX'
 
,
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
})

然後就可以開始寫程式碼了，比如將App.vue寫成下邊這樣，或者自己新建一個vue檔案就可以了。

<template>
  <div>
    <div class="amap-page-container">
      <el-amap
 
 vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
        <el-amap-info-window  :position="mywindow.position" :content="mywindow.content" :visible="mywindow.visible" :events="mywindow.events"></el-amap-info-window>
        <el-amap-marker :position="marker.position"
 
 :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
        <el-amap-circle :center="circle.center" :radius="circle.radius" :fillOpacity="circle.fillOpacity" :events="circle.events" :strokeColor="circle.strokeColor" :strokeStyle="circle.strokeStyle" :fillColor="circle.fillColor"></el-amap-circle>

      </el-amap>
    </div>
  </div>
</template>

<style>
  .amap-page-container {
    height: 500px;
  }
</style>


<script>
export default {
  data () {
    return {
      zoom: 15,
      center: [121.5273285, 31.21515044],
      circle: {
        clickable: true,
        center: [121.5273285, 31.21515044],
        radius: 200,
        fillOpacity: 0.3,
        strokeStyle: 'dashed',
        fillColor: '#FFFF00',
        strokeColor: '#00BFFF'
      },
      marker: {
        position: [121.5273285, 31.21515044],
        events: {
          click: () => {
            if (this.mywindow.visible === true) {
              this.mywindow.visible = false
            } else {
              this.mywindow.visible = true
            }
          },
          dragend: (e) => {
            this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
          }
        },
        visible: true,
        draggable: false
      },
      mywindow: {
        position: [121.5273285, 31.21515044],
        content: '<h4>該點資料資訊</h4><div class="text item">Information A: ...</div><div class="text item">Information B: ...</div>',
        visible: true,
        events: {
          close () {
            this.mywindow.visible = false
          }
        }
      },
      plugin: {
        pName: 'Scale',
        events: {
          init (instance) {
            console.log(instance)
          }
        }
      }
    }
  }
}
</script>

值得注意的是，上邊的三行程式碼：el-amap-info-window是用來顯示資訊窗體的，就是上圖中的information A:…那些，el-amap-marker是用來顯示那個藍色小標的，el-amap-circle是用來顯示那個黃色的圓圈的，所有的圖示都是完全由jason變數控制的，通過修改script部分的data就行了。

另外，經我測試，上述那個層，Window, Marker, Circle之間是不能隨便安排的，我也不知道為什麼，但是如果把Circle放在最上層，經常就不會顯示Marker。

另外一個比較遺憾的問題是，窗體裡能顯示的東西似乎不容易搞，格式是String或者html，但是我寫了一些簡單的html（比如button）都不行。似乎有更高階的一種窗體控制元件，但是這個好像不行的。