vue 图片拖动加载 类似于地图_vue加载高德地图，并自定义infoWindow事件

1. 加载高德地图

• 公共方法

• 具体加载方法

2.自定义infoWindow事件

使用Vue.extend()生成html

源码如下：

/** * 创建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) } })}

 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()) })