浅谈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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
js省市区级联查询(插件版&无插件版)
Mar 21 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python3爬虫学习入门教程
2018/12/11 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
化学教师教学反思
2014/01/17 职场文书
就业自我评价
2014/02/04 职场文书
消防安全宣传标语
2014/06/07 职场文书
财务负责人岗位职责
2015/02/03 职场文书
高中教师个人工作总结
2015/02/10 职场文书