vue-cli调用高德地图api

一、注册开发者账号并获得Key

1、进入官网https://lbs.amap.com/，注册并登录
2、登陆之后，点击控制台进入 [ 应用管理 ] 页面 [ 创建新应用 ]

3、获得应用 Key值，[ 服务平台 ]一项选择 [ Web 端 ( JSAPI )或 Web 服务 ]

二、封装函数

在vue-cli项目目录结构新增utils文件夹 ，utils文件夹里面，新建一个remoteLoad.js，主要是动态创建script标签，封装了一个函数传入URL地址

export default function remoteLoad (url, hasCallback) {
    return createScript(url)
    /**
     * 创建script
     * @param url
     * @returns {Promise}
     */
    function createScript (url) {
        var scriptElement = document.createElement('script')
        document.body.appendChild(scriptElement)
        var 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
     */
    function removeScript (scriptElement) {
        document.body.removeChild(scriptElement)
    }
}

三、定义组件

四、调用组件

 import MapDrag from '../components/MapDrag'
 
 //currentPosition:当前经纬度
 

 //拖拽地图
            dragMap (data) {
                this.dragData = {
                    lng: data.position.lng,
                    lat: data.position.lat,
                    address: data.address,
                    nearestJunction: data.nearestJunction,
                    nearestRoad: data.nearestRoad,
                    nearestPOI: data.nearestPOI
                }
            },

五、效果图