vue使用百度地图 vue-baidu-map

浅浅的花香味﹌ 2021-11-10 10:16 1104阅读 0赞

官方文档地址：[https://dafrok.github.io/vue-baidu-map][https_dafrok.github.io_vue-baidu-map]

1.安装：

npm i --save vue-baidu-map

2.全局初始化：

main.js文件
    
    import BaiduMap from 'vue-baidu-map'
    
    Vue.use(BaiduMap, {  
      ak: 'YOUR_APP_KEY' // 详见 http://lbsyun.baidu.com/apiconsole/key 
    })

3.具体界面：

<template>
      <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
    </template>
    <script>
    export default {
      data () {
        return {
          center: {lng: 0, lat: 0},
          zoom: 3
        }
      },
      methods: {
        handler ({BMap, map}) {
          console.log(BMap, map)
          this.center.lng = 116.404
          this.center.lat = 39.915
          this.zoom = 15
        }
      }
    }
    </script>

地图容器的实质是一个空的 DOM 节点，它可以用于挂载 `BmView` 组件或其它 DOM 节点或组件。如果你需要二次开发或手动控制其子组件，可以使用在 `ready` 事件中使用返回的 `BMap` 类和 `map` 实例进行手动控制。

4.实例属性

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ak</td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>百度地图开发者平台申请的密钥，仅在局部注册组件时声明。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>Point, String</td> 
   <td>&nbsp;</td> 
   <td>定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度</td> 
  </tr> 
  <tr> 
   <td>zoom</td> 
   <td>Number</td> 
   <td>&nbsp;</td> 
   <td>缩放等级</td> 
  </tr> 
  <tr> 
   <td>min-zoom</td> 
   <td>Number</td> 
   <td>&nbsp;</td> 
   <td>最小缩放级别</td> 
  </tr> 
  <tr> 
   <td>max-zoom</td> 
   <td>Number</td> 
   <td>&nbsp;</td> 
   <td>最大缩放级别</td> 
  </tr> 
  <tr> 
   <td>high-resolution</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>高分屏模式 该项仅在地图组件挂载时加载一次</td> 
  </tr> 
  <tr> 
   <td>map-click</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>允许点击 该项仅在地图组件挂载时加载一次</td> 
  </tr> 
  <tr> 
   <td>map-type</td> 
   <td>String</td> 
   <td>global.BMAP_NORMAL_MAP</td> 
   <td>地图类型</td> 
  </tr> 
  <tr> 
   <td>dragging</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>允许拖拽</td> 
  </tr> 
  <tr> 
   <td>scroll-wheel-zoom</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>允许鼠标滚轮缩放</td> 
  </tr> 
  <tr> 
   <td>double-click-zoom</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>允许双击缩放</td> 
  </tr> 
  <tr> 
   <td>keyboard</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>允许键盘操作</td> 
  </tr> 
  <tr> 
   <td>inertial-dragging</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>允许惯性拖拽</td> 
  </tr> 
  <tr> 
   <td>continuous-zoom</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>允许无级缩放</td> 
  </tr> 
  <tr> 
   <td>pinch-to-zoom</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>允许双指缩放</td> 
  </tr> 
  <tr> 
   <td>auto-resize</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>允许自适应容器尺寸</td> 
  </tr> 
  <tr> 
   <td>mapStyle</td> 
   <td>MapStyle</td> 
   <td>&nbsp;</td> 
   <td>自定义地图样式主题</td> 
  </tr> 
  <tr> 
   <td>theme</td> 
   <td>Array</td> 
   <td>&nbsp;</td> 
   <td>自定义主题，是&nbsp;<code>mapStyle.styleJson</code>&nbsp;属性的别名，可能会在下一个主版本中&nbsp;<strong>移除</strong>&nbsp;，不推荐使用</td> 
  </tr> 
 </tbody> 
</table>

5.事件

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click</td> 
   <td>{type, target, point, pixel, overlay}</td> 
   <td>左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick</td> 
  </tr> 
  <tr> 
   <td>dblclick</td> 
   <td>{type, target, pixel, point}</td> 
   <td>鼠标双击地图时会触发此事件</td> 
  </tr> 
  <tr> 
   <td>rightclick</td> 
   <td>{type, target, point, pixel, overlay}</td> 
   <td>右键单击地图时触发此事件。 当双击时，产生的事件序列为： rightclick rightclick rightdblclick</td> 
  </tr> 
  <tr> 
   <td>rightdblclick</td> 
   <td>{type, target, point, pixel, overlay}</td> 
   <td>右键双击地图时触发此事件</td> 
  </tr> 
  <tr> 
   <td>maptypechange</td> 
   <td>{type, target}</td> 
   <td>地图类型发生变化时触发此事件</td> 
  </tr> 
  <tr> 
   <td>mousemove</td> 
   <td>{type, target, point, pixel, overlay}</td> 
   <td>鼠标在地图区域移动过程中触发此事件</td> 
  </tr> 
  <tr> 
   <td>mouseover</td> 
   <td>{type, target}</td> 
   <td>鼠标移入地图区域时触发此事件</td> 
  </tr> 
  <tr> 
   <td>mouseout</td> 
   <td>{type, target}</td> 
   <td>鼠标移出地图区域时触发此事件</td> 
  </tr> 
  <tr> 
   <td>movestart</td> 
   <td>{type, target}</td> 
   <td>地图移动开始时触发此事件</td> 
  </tr> 
  <tr> 
   <td>moving</td> 
   <td>{type, target}</td> 
   <td>地图移动过程中触发此事件</td> 
  </tr> 
  <tr> 
   <td>moveend</td> 
   <td>{type, target}</td> 
   <td>地图移动结束时触发此事件</td> 
  </tr> 
  <tr> 
   <td>zoomstart</td> 
   <td>{type, target}</td> 
   <td>地图更改缩放级别开始时触发触发此事件</td> 
  </tr> 
  <tr> 
   <td>zoomend</td> 
   <td>{type, target}</td> 
   <td>地图更改缩放级别结束时触发触发此事件</td> 
  </tr> 
  <tr> 
   <td>addoverlay</td> 
   <td>{type, target}</td> 
   <td>当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件</td> 
  </tr> 
  <tr> 
   <td>addcontrol</td> 
   <td>{type, target}</td> 
   <td>当使用Map.addControl()方法向地图中添加单个控件时会触发此事件</td> 
  </tr> 
  <tr> 
   <td>removecontrol</td> 
   <td>{type, target}</td> 
   <td>当使用Map.removeControl()方法移除单个控件时会触发此事件</td> 
  </tr> 
  <tr> 
   <td>removeoverlay</td> 
   <td>{type, target}</td> 
   <td>当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件</td> 
  </tr> 
  <tr> 
   <td>clearoverlays</td> 
   <td>{type, target}</td> 
   <td>当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件</td> 
  </tr> 
  <tr> 
   <td>dragstart</td> 
   <td>{type, target, pixel, point}</td> 
   <td>开始拖拽地图时触发</td> 
  </tr> 
  <tr> 
   <td>dragging</td> 
   <td>{type, target, pixel, point}</td> 
   <td>拖拽地图过程中触发</td> 
  </tr> 
  <tr> 
   <td>dragend</td> 
   <td>{type, target, pixel, point}</td> 
   <td>停止拖拽地图时触发</td> 
  </tr> 
  <tr> 
   <td>addtilelayer</td> 
   <td>{type, target}</td> 
   <td>添加一个自定义地图图层时触发此事件</td> 
  </tr> 
  <tr> 
   <td>removetilelayer</td> 
   <td>{type, target}</td> 
   <td>移除一个自定义地图图层时触发此事件</td> 
  </tr> 
  <tr> 
   <td>load</td> 
   <td>{type, target, pixel, point, zoom}</td> 
   <td>调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>{type, target, size}</td> 
   <td>地图可视区域大小发生变化时会触发此事件</td> 
  </tr> 
  <tr> 
   <td>hotspotclick</td> 
   <td>{type, target, spots}</td> 
   <td>点击热区时触发此事件</td> 
  </tr> 
  <tr> 
   <td>hotspotover</td> 
   <td>{type, target, spots}</td> 
   <td>鼠标移至热区时触发此事件</td> 
  </tr> 
  <tr> 
   <td>hotspotout</td> 
   <td>{type, target, spots}</td> 
   <td>鼠标移出热区时触发此事件</td> 
  </tr> 
  <tr> 
   <td>tilesloaded</td> 
   <td>{type, target}</td> 
   <td>当地图所有图块完成加载时触发此事件</td> 
  </tr> 
  <tr> 
   <td>touchstart</td> 
   <td>{type, target, point,pixel}</td> 
   <td>触摸开始时触发此事件，仅适用移动设备</td> 
  </tr> 
  <tr> 
   <td>touchmove</td> 
   <td>{type, target, point,pixel}</td> 
   <td>触摸移动时触发此事件，仅适用移动设备</td> 
  </tr> 
  <tr> 
   <td>touchend</td> 
   <td>{type, target, point,pixel}</td> 
   <td>触摸结束时触发此事件，仅适用移动设备</td> 
  </tr> 
  <tr> 
   <td>longpress</td> 
   <td>{type, target, point,pixel}</td> 
   <td>长按事件，仅适用移动设备</td> 
  </tr> 
 </tbody> 
</table>

[https_dafrok.github.io_vue-baidu-map]: https://dafrok.github.io/vue-baidu-map