视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
在Vue里怎么使用百度地图
2020-11-27 19:55:59 责编:小采
文档


这次给大家带来在Vue里怎么使用百度地图,在Vue里使用百度地图的注意事项有哪些,下面就是实战案例,一起来看一下。

最近的项目里面,需要用到将具体地址转换成百度坐标系的经纬度,需求比较简单,所以就没有采用GitHub里面的百度Vue插件。

废话不说,直接贴出代码:

引入:在需要用到百度地图的组件里面直接引入

export default {
 methods: {
 loadBMapScript () {
 let script = document.createElement('script');
 script.src = 'http://api.map.baidu.com/api?v=3.0&ak=你的akKey&callback=bMapInit';
 document.body.appendChild(script);
 },
 qeuryLocation () {
 let myGeo = new BMap.Geocoder();
 // 地址转换成坐标系
 myGeo.getPoint('北京市海淀区上地10街10号', function (point) {
 if (point) {
 console.log(point);
 }
 },
 '北京市');
 }
 },
 mouted () {
 this.loadBMapScript();
 window['bMapInit'] = () => {
 this.qeuryLocation();
 };
 }
}

至此,就能够开始正常的使用百度地图了。

经过多方考察最终发现造成这个的原因是页面加载顺序导致的,这点在官网上也有提示,详细请查看官方文档

由于我用的是vue2.0,所以我是在mounted方法中调用的以下两个方法:

var map = new BMap.Map("container"); //创建地图实例,注意在调用此构造函数时应确保容器元素已经添加到地图上
var point = new BMap.Point(116.404, 39.915); //创建点坐标, 地图必须经过初始化才可以执行其他操作

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Vue怎样使用CDN优化首屏加载

在vuejs中使用v-show不起作用的原因有哪些

下载本文
显示全文
专题