vue加载高德地图，并自定义infoWindow事件

1. 加载高德地图

• 公共方法

/**
   * 创建script
   * @param url
   * @returns {Promise}
   */
const createScript = (url, hasCallback) => {
  let scriptElement = document.createElement('script')
  document.body.appendChild(scriptElement)
  let promise = new Promise((resolve, reject) => {
    scriptElement.addEventListener('load', e => {
      removeScript(scriptElement)
      if (!hasCallback) {
        resolve(e)
      }
    }, false)

    scriptElement.addEventListener('error', e => {
      removeScript(scriptElement)
      reject(e)
    }, false)

    if (hasCallback) {
      window.____callback____ = function () {
        resolve()
        window.____callback____ = null
      }
    }
  })

  if (hasCallback) {
    url += '&callback=____callback____'
  }

  scriptElement.src = url

  return promise
}

/**
 * 移除script标签
 * @param scriptElement script dom
 */
const removeScript = (scriptElement) => {
  document.body.removeChild(scriptElement)
}

• 具体加载方法

/**
 * 加载高德地图
 */
export function mapLoader (keyType) {
  const key = keyType ? apiKey[keyType] : apiKey.web

  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      createScript(`https://webapi.amap.com/maps?v=1.4.14&callback=initAMap&key=${key}`)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

2.自定义infoWindow事件

使用Vue.extend()生成html

           marker = new AMap.Marker({
              map: that.map,
              position: [item.lon, item.lat],
              icon: new AMap.Icon({
                size: new AMap.Size(19, 25),
                image: require('@/assets/images/img.png'),
                imageSize: new AMap.Size(19, 25)
              })
            })

            // 弹窗点击跳转详情
            Popup = Vue.extend({
              render (createElement) {
                return createElement('div', {
                  domProps: {
                    innerHTML: item.name
                  },
                  on: {
                    click: () => {
                      that.$router.push({ name: 'home' })
                    }
                  }
                })
              }
            })
            marker.content = (new Popup()).$mount('').$el
            marker.on('click', e => {
              infoWindow.setContent(e.target.content)
              infoWindow.open(that.map, e.target.getPosition())
            })