主要分解为如下步骤:

(1)在html文件中引入百度地图,
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your token "></script>
 
(2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级;
externals: {
   "BMap": "BMap"

 }, 

 
(3)添加地图组件BMapComponent.vue,这里主要注意两点:
    a)使用BMap的时候不需要import了,import反而会报错     
    b)注意一定要给bmap的div设置高度,否则会看不见
该组件的代码如下
  1. <template>
  2. <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
  3. <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
  4. <div id="allmap" v-bind:style="mapStyle"></div>
  5. </template>
  6. <script>
  7. exportdefault{
  8. data:function(){
  9. return{
  10. mapStyle:{
  11. width:'100%',
  12. height:this.mapHeight +'px'
  13. }
  14. }
  15. },
  16. props:{
  17. // 地图在该视图上的高度
  18. mapHeight:{
  19. type:Number,
  20. default:500
  21. },
  22. // 经度
  23. longitude:{
  24. type:Number,
  25. default:116.404
  26. },
  27. // 纬度
  28. latitude:{
  29. type:Number,
  30. default:39.915
  31. },
  32. description:{
  33. type:String,
  34. default:'天安门'
  35. }
  36. },
  37. ready:function(){
  38. var map =newBMap.Map("allmap");
  39. var point =newBMap.Point(this.longitude,this.latitude);
  40. var marker =newBMap.Marker(point);
  41. map.addOverlay(marker);
  42. map.centerAndZoom(point,15);
  43. // 信息窗的配置信息
  44. var opts ={
  45. width :250,
  46. height:75,
  47. title :"地址:",
  48. }
  49. var infoWindow =newBMap.InfoWindow(this.description, opts);// 创建信息窗口对象
  50. marker.addEventListener("click",function(){
  51. map.openInfoWindow(infoWindow,point);
  52. });
  53. map.enableScrollWheelZoom(true);
  54. map.openInfoWindow(infoWindow,point);//开启信息窗口
  55. }
  56. }
  57. </script>
  58. <!--Add"scoped" attribute to limit CSS to this component only -->
  59. <style scoped>
  60. </style>
 
(4) 在父组件中使用
    a)引入 import BMapComponent from './components/BMapComponent.vue'
    b)在template中增加标签
     <b-map-component></b-map-component>
    注意这里标签的命名,在vue文档中有说:http://vuejs.org.cn/guide/components.html#资源命名约定 
 

 

Vue系列:如何将百度地图包装成Vue的组件的更多相关文章

  1. vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http: ...

  2. 使用Vue Baidu Map对百度地图实现输入框搜索定位

    前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map     ...

  3. 微信小程序--百度地图坐标转换成腾讯地图坐标

    最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...

  4. vue 项目中引用百度地图

    新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...

  5. 在Vue框架中使用百度地图

    1.首先在index.html中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.co ...

  6. Vue中加载百度地图

    借助百度地图的 LocalSearch 和 Autocomplete 两个方法 实现方式:通过promise以及百度地图的callback回调函数 map.js 1 export function M ...

  7. Vue系列教程(一)之初识Vue

    一.Vue和MVVM Vue是一个渐进式的js框架,只注重视图层,结合了HTML+CSS+JS,非常的易用,并且有很好的生态系统,而且vue体积很小,速度很快,优化很到位. Vue技术周四MVVM开发 ...

  8. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  9. Qt的QWebChannel和JS、HTML通信/交互驱动百度地图

    Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...

随机推荐

  1. 14、SEO工程师要阅读的书籍 - IT软件人员书籍系列文章

    SEO工程师是Web项目中比较重要的一个角色.他主要负责网站的针对搜索引擎的优化方案的编写和实施.因为现在网站数量庞大,在全世界的这么多网站当中,想要让用户访问你的网站,就需要一些技巧性的内容.很多用 ...

  2. 写在复习MVC后

    MVC的一些 今天把MVC复习了下,包括官方文档以及各种中文博客. 官方文档里面最能说明的问题的图片,相对于传统的MVC,苹果分离了View和Model之间的通信,实现了更好的复用性.我觉得MVC更 ...

  3. PHP 类型判断和NULL,空值检查

    PHP是一种宽松类型的编程语言,在函数中对传入的参数值的“类型”以及”值是否为空或者NULL“进行检查是不可缺少的步骤. 类型检查 从PHP5开始,PHP允许对函数的参数进行类型约束,即可以约束参数的 ...

  4. web会话管理

    http协议是无状态的协议,也就是说服务器不知道这个http连接是那个浏览器发过来的. 要标识会话的唯一,有两种方法:1 Cookie  2 会话级cookie(开关浏览器算一次会话) 和 持久化的c ...

  5. request对象详解

    先来了解一下Request的主要方法: setAttribute(String name,Object):设置名字为name的request的参数值getAttribute(String name): ...

  6. 金士顿U盘,群联PS2251-60主控,量产还原教程

    还原成一个可移动磁盘教程,只是在"分区设置"中将 "模式=21" 改为 "模式=3" 即可. 1. 打开:"MPALL_F1_90 ...

  7. mongo数据备份及恢复脚本

    #!/bin/bashtime="$(date +"%Y.%m.%d")" id=`echo "show dbs;"|/usr/local/ ...

  8. android JAVA字符串转日期或日期转字符串(转)

    用法: SimpleDateFormat sdf = new SimpleDateFormat( " yyyy-MM-dd HH:mm:ss " ); 这一行最重要,它确立了转换的 ...

  9. Altium Designer 出现错误提示(警告)adding items to hidden net GND/VCC

    一般出现这个提示,不是错误. 可以取消net 网格标号 这样就不会报这个警告了. 还可以设置规则,不让它报告. 点击确定,但是再次打开工程时有得警告这个错误了.我想,还是取消NET标注.

  10. Linux 下子线程的 pthread_cleanup_push() 和 pthread_cleanup_pop() 研究

    线程退出前可能有一些清理工作,但是这部分代码又不会放到线程主体部分,就需要挂接一个或者几个线程“清洁工”来做这部分事情.需要这对兄弟: #include<pthread.h> void p ...