目录vue引入BMapGL is not defined
在项目src下添加bmp.js内容如下：（ak是密钥） [code]// bmp.js export function BMPGL(ak) { return new Promise(function(resolve, reject) { window.init = function() { // eslint-disable-next-line resolve(BMapGL) } const script = document.createElement('script') script.type = 'text/javascript' script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init` script.onerror = reject document.head.appendChild(script) }) }[/code]在要用到BMapGL的vue文件中导入[code]<template> <div class="home"> <!--创建地图容器--> <div id="admap" class="allmap"></div> </div> </template> <script> import { BMPGL } from "@/bmpgl.js" export default { name: "home", data() { return { ak: "XXXXXXXXX", // 百度的地图密钥 myMap: null }; }, mounted() { this.initMap() }, methods: { initMap() { // 传入密钥获取地图回调。 BMPGL(this.ak).then((BMapGL) => { // 创建地图实例 let map = new BMapGL.Map("admap"); // 创建点坐标 axios => res 获取的初始化定位坐标 let point = new BMapGL.Point(114.031761, 22.542826) // 初始化地图，设置中央点坐标和地图级别 map.centerAndZoom(point, 19) //开启鼠标滚轮缩放 map.enableScrollWheelZoom(true) map.setHeading(64.5) //map.setTilt(73) // 保存数据 // this.myMap = map }) .catch((err)=>{ console.log(err) }) }, } }; </script> <style lang="scss" scoped> .admap{ width: 100%; height: 100vh; position: relative; z-index: 1; } </style>[/code]完美办理啦！ 总结以上为个人经验，希望能给各人一个参考，也希望各人多多支持脚本之家。 来源：https://www.jb51.net/javascript/328983iv7.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 02:58 , Processed in 0.029901 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
