读者福利
========
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)
所以说我们首先得在Vue项目中引入原生的百度API接口。
在 index.html 文件中引入百度地图API连接
在使用地图的组件里面创建一个div用来展示地图,记住,一定要给这个div设置宽和高,不然显示不出来,不要太相信100%的方式设置宽高。
然后写一个方法来初始化百度地图,创建的方法在 created 里面调用
mounted() {
this.init();
},
methods: {
init() {
this.map = new window.BMapGL.Map(“container”, { enableMapClick: false }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
this.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
}
}
注意哈,BMap可能找不到,也许是一定找不到,会说没有找到方法之类的错,记住,在BMap这些百度自带的对象前面加 window. 就可以了,就像上面一样。
好了,按照上面的样子,百度地图就引进来了,但是哈,不建议这样用,用插件就可以,特别好,但是呢,因为这个项目需求不能使用插件,因为插件不支持画圆获取坐标的功能,只能这样凑合着用。
然后就是画圆了,这个东西不好整,官网给的demo就是单纯的画一个圆,没有说怎么拿到中心点坐标和半径,尽管给你展示出来了,但好像没有给提供接口拿数据,也是做了很多的准备,查阅了很多的资料才整理出来一个小的demo,但是有瑕疵,一会再说问题出在哪里。
先看官网案例: http://lbsyun.baidu.com/jsdemo.htm#gl_tool_2
首先在 index.html 文件中引入需要的 js 文件,就写在上一个需要你填key值得那句代码下面就行:
然后在需要使用地图画圈的组件写成下面这样,我懒得一点一点的弄了,直接粘全部的代码: