vue使用npm集成百度地图

1.查看vue-baidu-map依赖提供的文档:https://dafrok.github.io/vue-baidu-map/#/
2.集成过程
  (1)使用npm或者yarn进行安装,会将依赖文件安装进入package.json中看到
    ①Npm install vue-baidu-map --save
    ②Yarn add vue-baidu-map --save
  (2)分为两种引进方法
    ①局部引入(轻量且快速)
      1)首先导入依赖到这个页面
      2)使用依赖组件
      
    
      3)使用组件的标签baidu-map
      
      4)设置初始容器的高度(默认为0的容器,看不见)
      
    ②全局引入(未采用)
  (3)实现地图高度自动化
    ①让百度地图提供绑定的样式
    
    ②提供data值去占位
    
    ③当页面创建和销毁时,提供监听事件
    
    ④提供方法去更改浏览器高度
    
3.添加点
  (1)首先需要知道Vue中两个对象的概念
    ①Marker 表示地图上一个图像标注
      构造方法为(Point, MarkerOptions),前一个为点,后一个为类似标题等基本配置,使用json格式
    
    ②Point 表示地理坐标点
      构造函数需要传递经纬度
    
  (2)实现方式
    ①通过标签BMap的ready来初始化地图
    
    ②讲BMap和Map两个初始化得到的实例存放到本地,以备后用
    
    ③通过BMap实例化图像标注并绑定点击事件
    
    ④将其加载到当前Map上
    
  (3)注意项
    ①初始时,我直接使用JSON格式的经纬度左边,没有使用百度提供的Point构造方式,然后绑定事件会报错。
4.绘图
  (1)初始化提供一个遮蔽层
  
  (2)v-model关联对应的数据paths,数据格式为二维数组,一维数组用来存放有多少组连线,二维用来存放点,会依照点的顺序来一次连线。
  
  (3)查询到的数据直接存放在数据paths中就可以了
原文地址:https://www.cnblogs.com/kongkongFabian/p/11835662.html