高德地图VueAPI（vue-amap）学习记录

最近想测试一下地图插件，就先试了一下引用高德地图，鉴于我主要在学习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: '
该点数据信息
Information A: ...
Information B: ...
',
        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）都不行。似乎有更高级的一种窗体控件，但是这个好像不行的。