使用vue-amap

(图一) 页面预览 ：当前位置（红色 图标处）

（图二）页面预览： 文字设置 + 弹框设置

(图三) 搜索插件 + toolBar 插件

(图四) 时间轴插件

<template>
    <div class="amap-page-container">
      <!-- 搜索框 -->
      <el-amap-search-box class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult">
      </el-amap-search-box>
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :map-manager="amapManager"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo">
        <!-- 在地图上标记点 -->
        <el-amap-marker
          v-for="(marker,index) in markers"
          :key="index"
          :position="marker" >
        </el-amap-marker>
        <!-- 坐标点 -->
        <el-amap-marker vid="amapDemo" :position="center"></el-amap-marker>
        <el-amap-info-window
          :position="currentWindow.position"
          :content="currentWindow.content"
          :visible="currentWindow.visible"
          :events="currentWindow.events">
        </el-amap-info-window>
        <!-- 放置图片 -->
        <el-amap-ground-image v-for="(groundimage,index) in groundimages"
          :url="groundimage.url"
          :key="index"
          :bounds="groundimage.bounds"
          :events="groundimage.events">
        </el-amap-ground-image>
        <!-- 文字 -->
         <el-amap-text v-for="(text,index) in texts"
          :text="text.text"
          :key="index"
          :offset="text.offset"
          :position="text.position"
          :events="text.events">
         </el-amap-text>
          <el-amap-text v-for="(text,index) in texts2"
          :text="text.text"
          :key="index"
          :offset="text.offset"
          :position="text.position"
          :events="text.events">
         </el-amap-text>
          <el-amap-text v-for="(text,index) in texts3"
          :text="text.text"
          :key="index"
          :offset="text.offset"
          :position="text.position"
          :events="text.events">
         </el-amap-text>
      </el-amap>
      <!-- 点击地图的按钮 -->
      <div class="toolbar">
        <button @click="getMap()">获取地图信息</button>
        <button @click="switchWindow(0)">展示第一个位置</button>
        <button @click="switchWindow(1)">展示第二个位置</button>
      </div>
    </div>
</template>
<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)

let amapManager = new VueAMap.AMapManager()
export default {
  name: 'Gaode',
  created () {
    VueAMap.initAMapApiLoader({
      key: '你的开发者key',
      plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation',
        'AMapUI.loadUI', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      uiVersion: '1.0.11' // 版本号
    })
  },
  mounted () {
    this.currentWindow = this.windows[1]// 初始化窗口信息
  },
  data: function () {
    let me = this
    me.city = me.city || '上海'
    return {
      zoom: 12,
      center: [121.59996, 31.197646], // 中心位置
      makerConf: {
        position: [121.59996, 31.197646],
        content: ''
      },
      amapManager,
      events: {
        init: (o) => {
          // 将当前位置标记为A
          AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
            const marker = new SimpleMarker({
              iconLabel: 'A',
              iconStyle: 'red',
              map: o,
              position: o.getCenter()
            })
          })
          console.log('当前位置的坐标', o.getCenter())
          console.log('方法', this.$refs.map.$$getInstance())
          o.getCity(result => {
            console.log(result)
          })
        },
        'moveend': () => {
        },
        'zoomchange': () => {
        },
        'click': (e) => {
          console.log(e)
          this.center = [e.lnglat.lng, e.lnglat.lat]// 点击选择新地址为中心点
          const msg = {
            key: '3df604a614d7f0e325f79bb25cdee15c',
            location: this.center.join()
          }
          // 获取当前地址
          console.log(this, 'this')
          this.$$.ajax({
            url: 'https://restapi.amap.com/v3/geocode/regeo',
            data: msg,
            success: data => {
              console.log(data)
              let d = data.regeocode
              if (d) {
                this.address = d.formatted_address// 点击选择新地址并获取地址的名称
              }
            }
          })
        }
      },
      markers: [
        [121.49996, 31.297646],
        [121.40018, 31.197622],
        [121.49991, 31.207649]
      ],
      searchOption: {
        city: '上海',
        citylimit: true
      },
      mapCenter: [121.40996, 31.197646],
      // 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: `<img style="width:50px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543494665847&di=152e6f241b64580684a1c048ec9acd7e&imgtype=0&src=http%3A%2F%2Fp0.so.qhmsg.com%2Ft017668631465b251d5.gif"><p style="color:red">Hi！  马优晨，我在这里呢 ！</p>`,
          visible: true,
          events: {
            close () {
              console.log('关闭窗口一！')
            }
          }
        }, {
          position: [121.5875285, 31.21515044],
          content: '<img style="width:50px;" src="https://b305.photo.store.qq.com/psb?/V12aHQSq1CQ6SF/jfM4Tyeelt4v09alIPSOBkDqUCRgwqCHQKMs5iV4x3A!/b/dDEBAAAAAAAA&bo=wAMABQAAAAARB*Y!&rf=viewer_4"><p style="color:red">我在国际博览中心！</p>',
          visible: true,
          events: {
            close () {
              console.log('关闭窗口二！')
            }
          }
        }
      ],
      // 放置图片
      groundimages: [
        {
          url: 'https://imedl.sogoucdn.com/cache/skins/uploadImage/2018/11/12/15420362056827_former.gif',
          bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],
          events: {
            click () {
              alert('click groundimage')
            }
          }
        }
      ],
      // 放置文字
      texts: [
        {
          position: [121.5273285, 31.27515044],
          text: `<img style="width:50px;" src="http://imgsa.baidu.com/exp/w=500/sign=ce843cf58282b9013dadc333438ca97e/10dfa9ec8a13632763a8d5e1998fa0ec09fac79e.jpg"><p>探索宝藏的第一个线索！</p>`,
          offset: [0, 0],
          events: {
            click: () => {
              alert('click text')
            }
          }
        }
      ],
      // 放置文字
      texts2: [
        {
          position: [121.6873285, 31.19515044],
          text: '<img style="width:50px;" src="http://cdn.duitang.com/uploads/item/201501/10/20150110172950_aenAB.thumb.700_0.gif"><p>探索宝藏的第二个线索！</p>',
          offset: [0, 0],
          events: {
            click: () => {
              alert('click text')
            }
          }
        }
      ],
      // 放置文字
      texts3: [
        {
          position: [121.6873285, 31.29515044],
          text: '<img style="width:50px;" src="http://b-ssl.duitang.com/uploads/item/201710/05/20171005143631_5yZeJ.gif"><p>探索宝藏的第三个线索！</p>',
          offset: [0, 0],
          events: {
            click: () => {
              alert('click text')
            }
          }
        }
      ],
      slotWindow: {
        position: [121.5163285, 31.21515044]
      },
      // 当前窗口
      currentWindow: {
        position: [0, 0],
        content: '',
        events: {},
        visible: false
      },
      // 个人定义的地址
      address: ''
    }
  },
  methods: {
    getMap () {
      console.log(amapManager._componentMap)
      console.log(amapManager._map)
    },
    // 切换信息窗口
    switchWindow (tab) {
      this.currentWindow.visible = false
      this.$nextTick(() => {
        this.currentWindow = this.windows[tab]
        this.currentWindow.visible = true
      })
    },
    // 在地图上添加标记的点
    addMarker: function () {
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000
      this.markers.push([lng, lat])
    },
    // 搜索框输入
    onSearchResult (pois) {
      console.log(pois, '123456789')
      let me = this
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        var poi = pois[0]
        let lng = poi['lng']
        let lat = poi['lat']
        me.center = [lng, lat]
        me.makerConf.position = [lng, lat]
        me.list = pois
        pois.forEach(poi => {
          let {lng, lat} = poi
          lngSum += lng
          latSum += lat
          this.markers.push([poi.lng, poi.lat])
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.mapCenter = [center.lng, center.lat]
      }
    }
  }
}
</script>

<style scoped>
    .amap-demo {
      height: 1200px;
    }
    .search-box {
      position: absolute;
      top: 25px;
      left: 70px;
    }
    .amap-page-container {
      position: relative;
    }
    .toolbar button {
      background: #42b983;
      border: 0;
      color: white;
      padding: 8px;
      margin: 0 5px;
      border-radius: 3px;
      cursor: pointer;
      margin-top:10px;
    }
</style>