Vue开发高德地图应用的最佳实践

const loadScripts = async scripts => {
  const get = src => {
    return new Promise(function(resolve, reject) {
      const el = document.createElement('script')
      el.addEventListener('load', function() {
        resolve(src)
      }, false)
      el.addEventListener('error', function() {
        reject(src)
      }, false)
      el.id = src.id
      el.src = src.url
      document.getElementsByTagName('body')[0].appendChild(el) || document.getElementsByTagName('head')[0].appendChild(el)
    })
  }

  const myPromises = scripts.map(async script => {
    if (document.getElementById(script.id) === null) {
      return await get(script)
    }
  })

  return await Promise.all(myPromises)
}

export default loadScripts

<template>
  <div
    :style="{
      width: width,
      height: height
    }"
    class="amap-container"
  >
    <div ref="amap" class="amap">
      <slot />
    </div>
  </div>
</template>

<style lang="sCSS" scoped>
    .amap-container {
    .amap {
        width: 100%;
        height: 100%;
    }
    }
</style>

import loadScripts from '@/loadScripts'
export default {
  name: 'AMapContainer',
  props: {
    width: {
      require: false,
      type: String,
      default: '100%'
    },
    height: {
      require: false,
      type: String,
      default: '600px'
    },
    options: {
      require: false,
      type: Object,
      default: () => {}
    }
  },
  data: () => ({
    amap: null,
    amapinfo: {
      key: 'xxxxxxxxxxxxxx'
    }
  }),
  created() {
    this.initAMap()
  },
  beforeDestroy() {
    // 销毁地图
    if (!this.amap) {
      return
    }
    this.amap.destroy()
    this.amap = null
  },
  methods: {
    initAMap() {
      loadScripts([{
        id: 'ampa',
        url: `https://webapi.amap.com/maps?v=2.0&key=${this.amapInfo.key}&plugin=AMap.PolyGonEditor`
      }]).then(() => {
        this.amap = new window.AMap.Map(this.$refs['amap'], this.options)
        this.$emit('map', this.amap, window.AMap)
      })
    }
  }
}

<template>
    <amap-container height="100%" :options="amapOptions" @map="getAMapData" />
</template>

<script>
    import AMap from '@/components/AMap'

    export default {
        name: 'AMapDemo',
        components: {
            'amap-container': AMap
        },
        data: () => ({
            amapOptions: {
                zoom: 14,
                resizeEnable: true,
                viewMode: '3D',
                mapStyle: 'amap://styles/nORMal'
            },
            AMap: null, // 地图对象
            amap: null // 当前地图实例
        }),
        methods: {
            
            getAMapData(amap, AMap) {
                // 从组件获取地图 amap 对象
                this.amap = amap
                // 从组件获取地图 AMap 静态对象
                this.AMap = AMap
            }
        }
    }
</script>

import ContextCard from './components/ContextCard'

// 创建标记
const marker = new this.AMap.Marker({
  map: this.amap,
  position: [119.058904, 33.537069]
})
// 绑定点击事件
marker.on('click', this.markerInfoWindow)

// 点击打开弹窗
const markerInfoWindow = () => {
  // 引入 Vue 组件构造器实例化
  const ContextCardContent = Vue.extend(ContextCard)
  // 挂载组件
  const contextCardContent = new ContextCardContent().$mount()
  // 实例化窗口对象
  this.amapInfoWindow = new this.AMap.InfoWindow({
    isCustom: true,
    content: contextCardContent.$el,
    offset: new this.AMap.Pixel(0, -40)
  })
  // 打开窗口
  this.amapInfoWindow.open(this.amap, marker.getPosition())
  // 监听组件事件关闭窗口
  contextCardContent.$on('closeWindow', () => this.amapInfoWindow.close())
}

<template>
  <el-card class="context-box-card box-card">
    <div slot="header" class="header">
      <span>卡片名称</span>
      <el-button type="text" class="close-btn" @click="closeWindow">关闭</el-button>
    </div>
    <div v-for="o in 4" :key="o" class="text item">
      {{ '列表内容 ' + o }}
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'AMapContextCard',
  methods: {
    closeWindow() {
      this.$emit('closeWindow')
    }
  }
}
</script>

<style lang="scss" scoped>
.context-box-card {
  width: 320px;
  height: 200px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  ::v-deep .el-card__header {
    padding: 5px 20px;
  }
}
</style>

import Vue from "vue";
import App from "./App.vue";

import Element from "element-ui";

import "normalize.css/normalize.css";
import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;

Vue.use(Element);

new Vue({
  render: (h) => h(App)
}).$mount("#app");