脚本宝典收集整理的这篇文章主要介绍了vue.js 高德地图，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

AMap.js

module.exports = function (k) {
    return new Promise(function (resolve, reject) {
        window.inITTheMap = function () {
            resolve(amap)
        }

        VAR script = document.createElement('script')
        script.tyPE = 'text/javascript'
        script.async = true
        script.src = 'http://webapi.amap.COM/maps?v=1.3&callback=initTheMap&key=' + k
        //script.onload = resolve
        script.onerror = reject
        document.head.appendChild(script)
    })
}

AMap.vue

<template>
    <div></div>
</template>
<script>
    var mapLoader = require('./AMap.js')

    module.exports = {
        replace: true,
        ready() {
            var self = this

            mapLoader('bfe31f4e0fb231d29e1d3ce951e2c780').then(AMap => {
                self.map = new AMap.Map(self.$el, {
                    resizeEnable: true,
                    zoom: 12,
                })

                self.map.on('click', function (e) {
                    self.$dispatch('map-click', e)

                    if (!self.marker) {
                        self.marker = new AMap.Marker({ map: self.map })
                    }

                    self.marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()])
                })

                self.$nextTick(function () {
                    self.$dispatch('ready', self.map)
                })
            })
        }
    }
</script>

app.vue

<@H_777_161@template>
    <gd-map @ready="ready" :style='{ height:"400px" }'></gd-map>
</template>

<script>
    module.exports = {
        components: {
            gdMap: require('./AMap.vue')
        },
        methods: {
            ready(map) {
                console.log('ready', map)
            }
        }
    }
</script>

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js 高德地图全部内容，希望文章能够帮你解决vue.js 高德地图所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。