vue+google map

vue+google map

2023-03-27 07:07:05 4 0 0

admin

```
<template>
  <div id="iGMap_root"></div>
</template>

<script>
export default {
  name: 'iGMap',
  props: {
    /** 地图密钥 */
    mapKey: {
      type: String,
      default: '',
    },
    /** 地图初始配置 */
    mapOptions: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      mapInstance: null,
      defaultOptions: {}
    }
  },
  mounted() {
    console.log(1111111111111)
    if (!window.google) {
      this.loadScriptSync(
        `https://maps.googleapis.com/maps/api/js?key=${ this.mapKey }`
      ).then(res => {
        this.initGmap()
      }).catch(err => {
        this.$message.error('地图加载失败: ' + err)
      })
    } else {
      this.initGmap()
    }
  },
  methods: {
    /**
     * 初始化map
     */
    initGmap() {
      debugger
      this.mapInstance = new google.maps.Map(document.getElementById('iGMap_root'), {
        ...this.defaultOptions,
        ...this.mapOptions,
      })
      this.$emit('onMapLoad', this.mapInstance, this.loadScriptSync, this.loadScript)
      this.$emit('input', this.mapInstance)
    },
    /**
     * 同步加载script
     * @param url
     * @returns {Promise<unknown>}
     */
    loadScriptSync(url) {
      return new Promise((resolve, reject) => {
        try {
          const script = document.createElement('script')
          if (script.readyState) { // IE
            script.onreadystatechange = function () {
              if (script.readyState === 'loaded' || script.readyState === 'complete') {
                script.onreadystatechange = null
                resolve()
              }
            }
          } else { // 其他浏览器
            script.onload = function () {
              resolve()
            }
          }
          script.type = 'text/javascript'
          script.src = url
          document.getElementsByTagName('head')[0].appendChild(script)
        } catch (err) {
          const msg = typeof err === 'object' ? err.message : err
          reject(msg)
        }
      })
    },
    /**
     * 异步加载script
     * @param url
     */
    loadScript(url) {
      try {
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.getElementsByTagName('head')[0].appendChild(script)
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

<style scoped lang="scss">
#iGMap_root {
  width: 100%;
  height: 100%;
}
</style>

```

Pre: react的keep-alive

Next: photoshop在线

4

Table of content