vue引入高德地图问题

发布于 2022-09-11 20:04:42 字数 1603 浏览 13 评论 0

<script>
let posX = 116.397428;
let posY = 39.90923;
export default {
    data () {
        return {

        }
    },
    methods:{
        clickMe(){
            console.log(111);
            posY = 38.90923;
            this.loadMap();
        },
        //初始化地图
        initMap(){
            var scriptUrl = `https://webapi.amap.com/maps?v=1.4.13&key=b6669f90789f2971b0a439ce5ff64dd3&callback=map_callback`
            var scriptID = 'map_amp_ID'
            if(window.scriptID){
                window.map_callback()
                console.log('已加载成功')
                return
            }
            var script = document.createElement('script')
            script.id = scriptID
            script.src = scriptUrl

            var amapUIJs = document.createElement('script')
            amapUIJs.src = 'https://webapi.amap.com/ui/1.0/main-async.js'

            document.body.appendChild(script)
            document.body.appendChild(amapUIJs)
        },
        //加载地图
        loadMap(){
            var map = new AMap.Map('container', {
                zoom:16,//级别
                center: [posX,posY],//中心点坐标
            });
            var marker = new AMap.Marker({
                position:[posX,posY]//位置
            });
            map.add(marker);//添加到地图
        }
    },
    mounted:function(){
        //地图回调
        window.map_callback = this.loadMap();
    },
    created:function(){
        this.initMap();
    }
}
</script>

clipboard.png

报了一个错,怎么回事

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

跨年 2022-09-18 20:04:42

参考地图引入问题:https://segmentfault.com/a/11...

多彩岁月 2022-09-18 20:04:42

呢这个看着是冲突了 参考下这个 https://www.cnblogs.com/star-...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文