（一）基于vue-amap实现基本的定位信息窗口

（一）基于vue-amap实现基本的定位信息窗口

首先来个简单的用法和基本定位

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入vue-amap

安装依赖

npm install vue-amap --s

在main.js文件中引入

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
    key: 'your key',
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation',
    'AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],
    v: '1.4.4',
    uiVersion: '1.0.11' // 版本号
});

二、页面中使用

1.在.vue页面中

代码如下（示例）：

    <div :style="{width:'100%',height:'300px'}">
      <el-amap 
        ref="map"
        vid="amapDemo"
        :plugin="plugin" 
        :zoom="zoom"
        :events="events"
        class="amap-demo" 
        :center="center">
        <el-amap-info-window
          :position="currentWindow.position"
          :content="currentWindow.content"
          :visible="currentWindow.visible"
          :events="currentWindow.events">
        </el-amap-info-window>
      </el-amap>
    </div>

2.data定义

 
  data() {
    return {
      zoom: 12,
      center: [121.59996, 31.197646], // 中心位置
      events: {
        'click': (e) => {
          this.center = [e.lnglat.lng, e.lnglat.lat]// 点击选择新地址为中心点
            this.address = '这是一个测试地址啊哈哈哈哈'// 点击选择新地址并获取地址的名称
        }
      },
      markers: [
        [121.49996, 31.297646],
        [121.40018, 31.197622],
        [121.49991, 31.207649]
      ],
      // ToolBar工具条插件、MapType插件、Scale比例尺插件、OverView鹰眼插件
      plugin: ['ToolBar', {
        pName: 'MapType',
        defaultType: 0,
        events: {
          init (o) {
            console.log(o)
          }
        }
      }, {
        pName: 'Scale',
        events: {
          init (instance) {
            console.log(instance)
          }
        }
      }, {
        pName: 'OverView',
        events: {
          init (instance) {
            console.log(instance)
          }
        }
      }],
      windows: [ // 窗口信息框
        {
          position: [121.69996, 31.237646],
          content: `<p>这是个信息窗口 ！</p>`,
          visible: true,
          events: {
            close () {
              console.log('关闭了当前窗口！')
            }
          }
        }, 
      ],
      slotWindow: {
        position: [121.5163285, 31.21515044]
      },
      // 当前窗口
      currentWindow: {
        position: [0, 0],
        content: '',
        events: {},
        visible: false
      },
      // 个人定义的地址
      address: ''
    }
  }

3.初始化数据

  methods:{
      GaodeMap(){
        var map = new AMap.Map('all-map', {
            center: [121.59996, 31.197646], // [纬度，经度]
            resizeEnable: true,
            zoom: 10
        });
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
        })
    },

  },
  mounted(){
  		//显示信息窗口
      this.currentWindow.visible = false
      this.$nextTick(() => {
        this.currentWindow = this.windows[0]
        this.currentWindow.visible = true
      })
      this.GaodeMap()
 }