vue.js的vue-cli脚手架中使用百度地图API的实例


Posted in Javascript onJanuary 21, 2019

第一步,去百度地图开发者申请密钥。

1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用)

vue.js的vue-cli脚手架中使用百度地图API的实例

2.密钥申请成功后

vue.js的vue-cli脚手架中使用百度地图API的实例

第二步,在项目的需要模板中引入,具体如下:

vue.js的vue-cli脚手架中使用百度地图API的实例

项目路径

其中index.html存放地图链接,代码如下

在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看

选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=jspopular

vue.js的vue-cli脚手架中使用百度地图API的实例

然后在某模板  例:APP.vue里面实现,代码如下

<template> 
   <div id="app"> 
    <div id="allmap" ref="allmap"></div> 
    <router-view></router-view> //切记模板中一定要有渲染
   </div> 
  </template> 
  <script> 
  export default { 
   name: 'App', 
   methods:{ 
    map(){ 
     let map =new BMap.Map(this.$refs.allmap); // 创建Map实例 
     map.centerAndZoom(new BMap.Point(114.30, 30.60), 11);// 初始化地图,设置中心点坐标(经纬度/城市的名称)和地图级别 
     map.addControl(new BMap.MapTypeControl({//添加地图类型控件 
      mapTypes:[ 
       BMAP_NORMAL_MAP, 
       BMAP_HYBRID_MAP 
      ]})); 
     map.setCurrentCity("武汉");// 设置地图显示的城市 此项是必须设置的 
     map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 
     //map.setMapStyle({style:'midnight'});//地图风格
    } 
   }, 
   mounted(){ 
    //调用上面个的函数
    this.map() 
   } 
  } 
  </script> 
  <style> 
  #app { 
   font-family: 'Avenir', Helvetica, Arial, sans-serif; 
   -webkit-font-smoothing: antialiased; 
   -moz-osx-font-smoothing: grayscale; 
   text-align: center; 
   color: #2c3e50; 
   margin-top: 60px; 
  }   
  /*设置地图的宽高*/
  #allmap{ 
   height: 500px; 
   overflow: hidden; 
  } 
  </style>

在html页面中使用百度接口步骤也如上面所示

如有不足请谅解!希望给您带来帮助。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
vue实现树状表格效果
Dec 29 Vue.js
JavaScript使用Math.random()生成简单的验证码
Jan 21 #Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 #Javascript
js中对象和面向对象与Json介绍
Jan 21 #Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 #Javascript
JavaScript常用事件介绍
Jan 21 #Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 #Javascript
JavaScript闭包与作用域链实例分析
Jan 21 #Javascript
You might like
一篇入门的php Class 文章
2007/04/04 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
python3爬取数据至mysql的方法
2018/06/26 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
海南地接欢迎词
2014/01/14 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
党校学习心得体会范文
2014/09/09 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏