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); //开启鼠标滚轮缩放 }) }) },
搞定!