最近开发需要使用地图来记录经纬度,就特意写一下自己的使用方法:
链接推荐
链接1:vue-baidu-map官网
链接2: vue-baidu-map文档

一:插件的安装

$ npm install vue-baidu-map --save

二:秘钥的注册

登录http://lbsyun.baidu.com/
2.1点击左上角的控制台
2.2点击管理应用中我的应用
2.3点击创建应用
2.4记录下ak(ak 就是百度地图的密钥)
在这里插入图片描述

三:插件的引入

3.1全局注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_KEY'
})
<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>
 
<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

3.2按需导入

按需导入相对来说是最好的,减少代码内存(组件请参考5.3)

import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker,BmNavigation} from 'vue-baidu-map'
 export default {
    components: {
      BaiduMap,
      BmControl,
      BmView,
      BmAutoComplete,
      BmLocalSearch,
      BmMarker,
      BmNavigation,
    },
    data:function(){
      return {
      }
    }
}
<baidu-map v-bind:style="mapStyle" class="bm-view" ak="YOUR_KEY"
      :center="center" 
      :zoom="zoom" 
      :min-zoom="minZoom"
      :scroll-wheel-zoom="true" 
      @click="getClickInfo">
        <bm-view style="width: 100%; height:500px;"></bm-view>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </bm-marker>
        <bm-control :offset="{width: '10px', height: '10px'}">
          <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
            <input type="text" placeholder="请输入大致位置" class="serachinput">
          </bm-auto-complete>
        </bm-control>
        <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
      </baidu-map>

此时效果图如下
在这里插入图片描述

四:常见问题

4.1BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内。

4.2没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外,因为百度地图会根据地名自动调整 zoom 的值。

4.3由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在 vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。

五:属性

5.1实例属性

属性名类型默认值描述
akString百度地图开发者平台申请的密钥,仅在局部注册组件时声明。
centerPoint, String定位, 可使用如“广州市海珠区”的地区字符串,也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
zoomNumber缩放等级
min-zoomNumber最小缩放级别
max-zoomNumber最大缩放级别
high-resolutionBooleantrue高分屏模式 该项仅在地图组件挂载时加载一次
map-clickBooleantrue允许点击 该项仅在地图组件挂载时加载一次
map-typeStringglobal.BMAP_NORMAL_MAP地图类型
draggingBooleantrue允许拖拽
scroll-wheel-zoomBooleanfalse允许鼠标滚轮缩放
double-click-zoomBooleantrue允许双击缩放
keyboardBooleantrue允许键盘操作
inertial-draggingBooleanfalse允许惯性拖拽
continuous-zoomBooleanfalse允许无级缩放
pinch-to-zoomBooleantrue允许双指缩放
auto-resizeBooleantrue允许自适应容器尺寸
mapStyleMapStyle自定义地图样式主题
themeArray自定义主题,是 mapStyle.styleJson 属性的别名,可能会在下一个主版本中 移除 ,不推荐使用

5.2事件

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

5.3各种功能组件

可以根据需求,按需导入以下的组件

事件名属性描述
BaiduMap地图盒子在vue中引入百度地图
BmScale比例尺控件在地图加入比例尺控件
BmNavigation缩放控件在地图加入比例尺控件
BmMapType地图类型控件在地图加入比例尺控件
BmOverviewMap缩略图控件在地图加入比例尺控件
BmGeolocation定位控件在地图加入比例尺控件
BmCopyright版权控件在地图加入比例尺控件
BmCityList城市选择控件在地图加入城市选择
BmPanorama全景控件在地图加入全景
BmControl自定义控件在地图加入自定义
BmMarker点覆盖物在地图中心添加点标记
BmPointCollection海量点覆盖物在地图上添加多个点标记
BmPolyline折线覆盖物在地图中添加可编辑的折线
BmPolygon多边形覆盖物在地图中添加可编辑的多边形
BmCircle圆形覆盖物在地图中添加圆形
BmGround地面覆盖物在地图中添加地面图层
BmLabel标签覆盖物在地图中添加一个自定义的文本标签
BmInfoWindow信息窗体覆盖物在地图中添加一个信息窗体
BmOverlay自定义覆盖物自定义覆盖物组件是一个高度订制化的组件
BmLocalSearch地区检索对一个地图实例进行地区检索
BmTransit公交路线规划检索AA到BB的公交路线规划
BmWalking步行路线规划检索AA到BB的步行路线规划
BmDriving驾车路线规划查询AA到BB的驾车路线规划
BmBus公交路线检索查询深圳XX路公交车途径路线
BmContextMenu上下文菜单在地图中插入一个上下文菜单
BmContextMenuItem菜单项菜单项是右键菜单的子组件,请勿在其他组件中使用。
BmBoundary行政区划在地图中添加深圳市南山区行政区划范围
BmAutoComplete自动填充输入关键词时,会自动填充内容
Logo

前往低代码交流专区

更多推荐