vue-cli使用高德地图原生api

最新推荐文章于 2024-09-19 22:05:10 发布

初相识链接终相守

最新推荐文章于 2024-09-19 22:05:10 发布

阅读量186

点赞数 1

本文链接：https://blog.csdn.net/qq_37808993/article/details/117668642

版权

本文档介绍了如何在Vue-cli项目中引入并使用高德地图API。首先在src/utils创建公用函数，用于加载地图脚本。然后在main.js中全局引入这个工具函数，最后在组件中调用该函数初始化地图，并设置地图的中心点、缩放级别等属性。通过这种方式，可以在Vue应用中实现地图展示和交互功能。

摘要由CSDN通过智能技术生成

vue-cli使用高德地图api

1、再src文件下新建util文件夹，在其下边建公用函数类

export default {
    loadMap(v = '2.0', key = '写自己申请的高德可以') {
        return new Promise(function (resolve, reject) {
            let hasLoaded = document.getElementById("amap");
            if (hasLoaded) {//只加载一次
                if (hasLoaded._version === v && hasLoaded._key === key) {
                    resolve(window.AMap);
                    return;
                }
                document.head.removeChild(hasLoaded);
            }
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.id = "amap";
            script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&callback=initAMap&plugin=AMap.PolygonEditor`;
            //此处若缺失callback，则页面在刷新后地图会变为空白不显示
            script.onerror = reject;
            script._version = v;
            script._key = key;
            document.head.appendChild(script)
            window.initAMap = () => {
                resolve(window.AMap)
            }
        })
    }
}

2、在main.js下引入

import mapUtil from "../utils/index";

//url
Vue.prototype.$mapUtil = mapUtil;

3、map.vue使用

<template>
    <div class="main">
        <div class="container">
            <div id="map" ref="map" style="width: 100%; height: 100%">

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            polygon:[],
        };
    },

    components: {},

    computed: {},

    mounted() {
        let self = this;
        setTimeout(function () {
            self.initMap();
        }, 400); //延时加载地图，保证数据获取成功
        // this.polyEditor.open()
    },

    methods: {
        initMap() {
            let _this=this;
            this.$mapUtil
                .loadMap('2.0')
                .then((AMap) => {
                    _this.map = new AMap.Map('map', {
                        zoom: 12,
                        center: [116.471354, 39.994257], //初始化地图中心点
                        resizeEnable: true
                    });
                })
                .catch(() => {
                    console.log('地图加载失败！');
                });
        }
    }
};
</script>
<style  scoped>
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.container {
    display: flex;
    height: 100%;
    flex-direction: column;
}
</style>