html引入百度地图报错,vue引入百度地图BMapGL,或者其他个性化地图

e238aaa4fa38

3.jpg

vue的百度地图早就有vue-baidu-map这里就不赘述了,

自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便。

vue-baidu-map 传送门 https://dafrok.github.io/vue-baidu-map/#/zh/index

这里主要是在vue里面引入BMapGL,或者其他个性化地图。

另外还有一篇文章是更加去全面的关于 BMapGL + BMapGLLib 引入的: vue引入百度地图BMapGL,以及辅助工具BMapGLLib 的引入,BMapGL鼠标绘制功能。

因为异步的问题直接index.html引入会报错,所以采用以下方式

关于地图异步这个问题这里啰嗦一下(年纪大了就是喜欢啰嗦?):

地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例。百度地图组件是异步加载,请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例,如有需要,请在所需组件的 ready 事件回调函数的参数中获取。

——【vue-baidu-map,全局组件事件】

地图没有生成的时候不要进行任何对地图的操作。

譬如说你的坐标中心点初始化是要从后台获取数据进行初始化定位的。

一定要等到地图渲染完成以后再进行操作。也就是关于地图的初始化数据接口的请求要放在地图ready里面。(这方面出错容易引起的错误例子:一开始地图空白,刷新一下就好了什么的。。。map报错。map, BMap,undefined什么的。。。。)

文件源码地址

文件结构图解

e238aaa4fa38

文件结构图解.png

在src里面创建一个bmpgl.js

其实建立在哪看你自己的意愿啦。(小声逼逼)

// bmpgl.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)

})

}

vue页面里面引入

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("container");

// 创建点坐标 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)

})

},

}

};

.allmap {

width: 100%;

height: 100vh;

position: relative;

z-index: 1;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/531825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sort the Array

1 /*2 思路&#xff1a; 3 找到单调下降串的起始位置[l, r]4 如果左边 0...l-1中的最大值 > l...r中的最小值 或者5 r1...n中的最小值 < l...r中的最大值 都是不能实现排序的&#xff01; 6 */7 #include<iostream>8 #include<cstdio>9 #include…

排序千万级数据_从千万级房产成交量排名,窥探中国城市的真实家底

原标题&#xff1a;从千万级房产成交量排名&#xff0c;窥探中国城市的真实家底 文&#xff0f;孙不熟 来源/城市战争 如果你有1000万以上的买房预算&#xff0c;你的选择其实很少&#xff0c;总共不超过10个城市&#xff0c;这就是中国城市和楼市的真实家底。 昨天推送了一篇《…

html 实现列表组并排,列表组--自定义列表组

Bootstrap框加在链接列表组的基础上新增了两个样式&#xff1a;☑list-group-item-heading&#xff1a;用来定义列表项头部样式☑list-group-item-text&#xff1a;用来定义列表项主要内容这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容&#xff0c;如下面的…

poj1006生理周期(中国剩余定理)

1 /*2 中国剩余定理可以描述为&#xff1a;3 若某数x分别被d1、、…、dn除得的余数为r1、r2、…、rn&#xff0c;则可表示为下式&#xff1a;4 xR1r1R2r2…RnrnRD5 其中R1是d2、d3、…、dn的公倍数&#xff0c;而且被d1除&#xff0c;余数为1&#xff1b;&#xff08;称为R1相对…

queryselectorall 怎么取name_用这个方法,我爬取了《王者荣耀》《英雄联盟》等游戏皮肤图片...

本文简介&#xff1a;本文使用Python制作爬虫&#xff0c;来爬取《英雄联盟》《王者荣耀》《神之浩劫》等游戏官方网站的英雄皮肤图片。可以作为新手爬虫的练手实战案例&#xff01;&#xff01;爱打游戏的各位肯定也是对游戏里面制作精美&#xff0c;妩媚无比或是帅气逼人的皮…

云端计算机可以玩游戏么,手机掌上云电脑是什么?为什么可以玩PC游戏?

原标题&#xff1a;手机掌上云电脑是什么&#xff1f;为什么可以玩PC游戏&#xff1f;经常会在一些短视频平台上看到别人用云电脑的应用在手机上玩PC游戏&#xff0c;那么这个掌上云电脑的应用到底是什么呢&#xff1f;为什么可以玩PC游戏呢&#xff1f;按照以往的理解&#xf…

codeforces——Little Pony and Sort by Shift

1 /*2 题目大意&#xff1a;给你一个序列&#xff0c;不断地将最后边的数值移动到最前边&#xff0c;问最少经过多少次可以变成一个单调递增的序列&#xff01; 3 如果不能则输出-1。 4 如果该序列按照不断从后向前移动排序成功&#xff0c;那么该序列要么只有一个单调递增的…

用python玩转数据慕课答案第三周_大学慕课用Python玩转数据答案公众号

抹灰用石灰膏的熟化时间不少于多少天&#xff1f;16只兔子&#xff0c;分别装在5个笼子里&#xff0c;每个笼子里的小兔子只数都不相等&#xff0c;笼子里最不可能出现的只数是( )。患者&#xff0c;女&#xff0c;44岁。患心肌梗死住院治疗&#xff0c;首次静脉泵入硝酸甘油时…

计算机组策略怎么设置远程桌面,组策略 之   自动启用客户端远程桌面功能

在企业里进行管理的时候&#xff0c;有时需要利用远程桌面来管理客户端计算机&#xff0c;在一般情况下&#xff0c;往往需要客户端启用此功能&#xff0c;有没有好的办法&#xff0c;让客户端自动启用呢&#xff1f;当然可以&#xff0c;我们可以通过组策略的形式来完成。实施…

codeforces——Little Pony and Expected Maximum

1 /*2 我们枚举每次选择最大数值的情况&#xff1a;m个数&#xff0c; 投掷n次3 最大值是1&#xff1a; 1种4 2&#xff1a; 2^n-15 3: 3^n-2^n6 .....7 m: m^n-(m-1)^n8 9 所以最后的结果sum((k/m)^n …

华北水利水电大学c语言程序设计四_我校代表队在“中国高等计算机大赛——团体程序设计天梯赛” 中喜获佳绩...

近日&#xff0c;第四届“中国高校计算机大赛——团体程序设计天梯赛”全国总决赛获奖名单公布&#xff0c;我校以全国高校排名第84位&#xff0c;河南省高校第4名的成绩获得河南省高校二等奖。我校派出的“NCWU_面壁者”&#xff0c;“NCWU_弹星者”和“NCWU_执剑人”三支队伍…

计算机控制基础知识,最新 分析计算机控制系统及其运算基础知识-精品

分析计算机控制系统及其运算基础知识系统程序层的工作基础建立在控制系统改造和扩充过的机器&#xff0c;下文就是关于控制系统及其运算基础知识论文。随着技术的飞进发展&#xff0c;计算机控制系统及其操作过程的运算程序研究已成为一个热门话题&#xff0c;本文主要对计算机…

当我不再依赖你的时候说说_不要依赖任何人说说 不要指望别人的经典话

1、静下心慢慢变得沉稳&#xff0c;不再依赖任何人&#xff0c; 珍惜身边人 &#xff0c;不强求不勉强每天都要很开心。2、的确没什么人可以陪你一辈子&#xff0c;所以在那些难熬的日子过去之后&#xff0c;将会不再依赖任何人成长。3、自己一个人走在路上&#xff0c;才发现依…

Uvaoj 11624 - Fire!

1 /*************************************************************************2 > File Name: test.cpp3 > Author: HJZ4 > Mail: 2570230521qq.com 5 > Created Time: 2014年08月03日 星期日 07时26分58秒6 ********************************…

android 版本更新工具类_报表分析工具FastReport .Net 2021年超大版本更新,实现了对.NET 5的支持...

在FastReport .NET 2021.1的新版本中&#xff0c;我们实现了对.NET 5的支持。添加了新条形码-Deutsce Post Leitcode。将RTF转换为报告对象的算法已得到显着改进。并且还添加了用于转换数字的新功能。欢迎下载体验。&#xff08;点击下方按钮下载&#xff09;立即点击下载FastR…

中国科学院大学计算机金智,金智-中国科学院大学-UCAS

发表论文(1) Carrier-Number-Fluctuation induced ultralow 1/f noise level in top-gated graphene field effect transistors, ACS Applied Materials & Interfaces, 2017, 通讯作者(2) The two timescales in the charge trapping mechanism for the hysteresiss behavi…

win7下搭建PHP mysql_简单介绍win7下搭建apache+php+mysql开发环境

环境目录&#xff1a;E:\dev​一、Apache我们下载VC11运行库的1.安装说明&#xff1a;运行apache安装程序&#xff0c;方法非常简单&#xff0c;弹安装界面后一直“next”接着会出现一个界面&#xff0c;需要填写3个内容&#xff0c;分别为&#xff1a;Network Domain、Server …

poj 3101Astronomy(圆周追击+分数最小公倍数)

1 /*2 本题属于圆周追击问题&#xff1a;3 假设已知两个圆周运动的物体的周期分别是a ,b, 设每隔时间t就会在同一条直线上 4 在同一条直线上的条件是 角度之差为 PI !5 那么就有方程 &#xff08;2PI/a - 2PI/b&#xff09;* tPI 所以就有 tab/(2|a-b|);6 …

广东省计算机应用考试试题,2015广东省计算机等级考试试题 二级C试题最新考试试题库...

1、在计算机的应用中&#xff0c;“DSS”表示( B )A、管理信息系统 B、决策支持系统C、办公自动化 D、人工智能2、计算机病毒是可以造成机器故障的( D )A、一种计算机设备 B、一种计算机芯片C、一种计算机部件 D、一种计算机程序3、防范病毒的有效手段&#xff0c;不正确的是( …

mysql查找大小写_mysql查询不区分大小写

摘自&#xff1a;http://www.jb51.net/article/70884.htm当我们输入不管大小写都能查询到数据&#xff0c;例如&#xff1a;输入 aaa 或者aaA ,AAA都能查询同样的结果&#xff0c;说明查询条件对大小写不敏感。解决方案一&#xff1a;于是怀疑Mysql的问题。做个实验&#xff1a…