浅谈Vue下使用百度地图的简易方法


Posted in Javascript onMarch 23, 2018

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();
    };
  }
}

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

按照官方文档写的代码报了以下图示的错:

浅谈Vue下使用百度地图的简易方法

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
Webpack 之 babel-loader文件预处理器详解
Mar 23 #Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 #Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 #Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 #Javascript
JavaScript 五大常见函数
Mar 23 #Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php注入实例
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
javascript 精粹笔记
2010/05/09 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python实现大文件分割与合并
2019/07/22 Python
python 星号(*)的多种用途
2020/09/21 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
八年级物理教学反思
2014/01/19 职场文书
政治思想表现评语
2014/05/04 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书