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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 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中__get()和__set()的用法实例详解
2013/06/04 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
物业管理专业求职信
2014/06/11 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang