欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 项目中引用百度地图

程序员文章站 2022-03-15 21:17:04
新建map.js 在引用的组件中引入map.js div包裹引用 设置css高度 调用方法 搞定! ......

新建map.js

export const baidumap = {
    init: function() {
        const bmapurl = 'https://api.map.baidu.com/api?v=3.0&ak=' + ak + '&s=1&callback=onbmapcallback'
     return new promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof bmap !== 'undefined') {
                resolve(bmap)
                return true
            }
            // 百度地图异步加载回调处理
            window.onbmapcallback = function() {
                console.log('百度地图脚本初始化成功...')
                resolve(bmap)
            };
            // 插入script脚本
            let scriptnode = document.createelement('script')
            scriptnode.setattribute('type', 'text/javascript')
            scriptnode.setattribute('src', bmapurl)
            document.body.appendchild(scriptnode)
        })
    }
}

在引用的组件中引入map.js

import {
        baidumap
} from '@/common/js/map.js';

div包裹引用

<template>
    <div>
        <div id="allmap" ref="allmap"></div>
    </div>
</template>

设置css高度

<style lang="scss" scoped>
#allmap{
    height:400px;
}
</style>

调用方法

mounted() {
        this.$nexttick(function() {
            baidumap.init().then(bmap => {
                let map = new bmap.map(this.$refs.allmap);  // 创建map实例
                map.centerandzoom(new bmap.point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
                map.addcontrol(new bmap.maptypecontrol({ //添加地图类型控件
                    maptypes: [
                        bmap_normal_map,
                        bmap_hybrid_map
                    ]
                }));
                map.setcurrentcity("北京"); // 设置地图显示的城市 此项是必须设置的
                map.enablescrollwheelzoom(true);  //开启鼠标滚轮缩放
            })
        })

    },

搞定!