vue.js 高德地图

最新推荐文章于 2024-09-20 18:05:25 发布

转载最新推荐文章于 2024-09-20 18:05:25 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000006703063

文章标签：

#javascript #ViewUI

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

<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>