使用vue baidu map小结

于 2021-04-09 13:32:44 发布
阅读量2k 收藏 9
点赞数 3
分类专栏： 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45811413/article/details/115512460
版权

文章目录

快速上手

安装

  • NPM
npm install vue-baidu-map --save
  • CDN
<script src="https://unpkg.com/vue-baidu-map"></script>

全局引入

在main.js文件里面，不过要先在百度地图开放平台申请ak（密钥）

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_APP_KEY'
})

使用

<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>

效果

在这里插入图片描述
属性说明：

  • center：中心点坐标；
  • zoom：地图等级；
  • ready事件：执行地图 API 加载完毕后才能执行的代码；

地图

绘制图形

<template>
  <baidu-map
    class="map"
    :center="{ lng: 116.404, lat: 39.915 }"
    :zoom="14"
    @mousemove="syncPolyline"
    @click="paintPolyline"
    @rightclick="newPolyline"
  >
    <bm-control>
      <button @click="toggle('polyline')">
        {{ polyline.editing ? "停止绘制" : "开始绘制" }}
      </button>
    </bm-control>
    <bm-polyline :path="path" v-for="path of polyline.paths" :key="path"></bm-polyline>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      polyline: {
        editing: false,
        paths: [],
      },
    };
  },
  methods: {
    toggle(name) {//停止/开始绘制
      this[name].editing = !this[name].editing;
    },
    syncPolyline(e) {//鼠标经过事件
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        return;
      }
      const path = paths[paths.length - 1];
      if (!path.length) {
        return;
      }
      if (path.length === 1) {
        path.push(e.point);
      }
      this.$set(path, path.length - 1, e.point);
    },
    newPolyline(e) {//鼠标右键单击事件
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        paths.push([]);
      }
      const path = paths[paths.length - 1];
      path.pop();
      if (path.length) {
        paths.push([]);
      }
    },
    paintPolyline(e) {//鼠标左键单击事件
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      !paths.length && paths.push([]);
      paths[paths.length - 1].push(e.point);
    },
  },
};
</script>

效果：
在这里插入图片描述

事件说明：

  • mousemove：鼠标在地图区域移动过程中触发此事件。
  • click：左键单击地图时触发此事件。
  • rightclick：右键单击地图时触发此事件。

开启滚轮缩放

scroll-wheel-zoom：允许鼠标滚轮缩放

可选值：

常量描述
true开启滚轮缩放
false禁用滚轮缩放
<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"  :scroll-wheel-zoom="true"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

设置地图类型

mapType：表示一种地图类型。

可选值：

常量描述
BMAP_NORMAL_MAP此地图类型展示普通街道视图
BMAP_PERSPECTIVE_MAP此地图类型展示透视图像视图
BMAP_SATELLITE_MAP此地图类型展示卫星视图
BMAP_HYBRID_MAP此地图类型展示卫星和路网的混合视图
<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler" mapType="BMAP_SATELLITE_MAP"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

获取经纬度跟zoom

<template>
  <div id="big">
    <input v-model.number="center.lng">
    <input v-model.number="center.lat">
    <input v-model.number="zoom">
    <baidu-map 
        class="map"
        :scroll-wheel-zoom="true"
        :center="center"
        :zoom="zoom"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom">
    </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15
    }
  },
  methods: {
     syncCenterAndZoom (e) {
      const {lng, lat} = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    }
  }
}
</script>
<style lang="scss" scoped>
  #big{
    width: 100%;
    height: 100%;
    .map{
      width: 100%;
      height: 100%;
    }
  }
</style>>

地图视图

  • BmView 是用于渲染百度地图实例可视化区域的容器，通常与 LocalSearch 等会输出其它视图的组件结合使用。
    当 BaiduMap 组件中没有挂载 BmView 组件时，百度地图实例将渲染在 节点上。
    当 BaiduMap 挂载了 BmView 组件时，百度地图实例将渲染在 节点上。
    每个 BaiduMap 组件应对应唯一一个 BmView 组件，如果声明了多个 BmView 组件，只有第一个能被正常渲染。 该组件主要用于控制布局。除了能够渲染地图视图以外，没有任何其它用途。

示例：使用 BmView 渲染一个地图实例

<template>
  <div id="big">
   <baidu-map class="map" style="display: flex; flex-direction: column" center="北京" zoom='10'>
    <p style="padding: 0 10px;">以下是使用 `bm-view` 组件渲染的百度地图实例</p>
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
  </baidu-map>
  </div>
</template>
<style lang="scss" scoped>
  #big{
    width: 100%;
    height: 100%;
    .map{
      width: 100%;
      height: 100%;
    }
  }
</style>>

效果：
在这里插入图片描述

控件

比例尺

BmScale
属性

属性名描述
anchor控件停靠位置
offset控件偏移值

代码

<template>
  <baidu-map :center="center" :zoom="zoom"  :scroll-wheel-zoom='true'>
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng:113.331084, lat:23.112223 },
      zoom: 15,
    };
  }
};
</script>

效果
在这里插入图片描述

缩放控件

BmNavigation
属性

属性名描述
anchor控件停靠位置
offset控件偏移值
type平移缩放控件的类型
showZoomInfo是否显示级别提示信息
enableGeolocation控件是否集成定位功能

代码

<template>
  <baidu-map :center="center" :zoom="zoom"  :scroll-wheel-zoom='true'>
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng:113.331084, lat:23.112223 },
      zoom: 15,
    };
  }
};
</script>

效果
在这里插入图片描述

地图类型

BmMapType

属性

属性名描述
anchor控件停靠位置
offset控件偏移值
type控件样式
mapTypes控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型

代码

<template>
  <baidu-map :center="center" :zoom="zoom"  :scroll-wheel-zoom='true'>
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng:113.331084, lat:23.112223 },
      zoom: 15,
    };
  }
};
</script>

效果
在这里插入图片描述
在这里插入图片描述

地图类型

BmOverviewMap

属性

属性名描述
anchor控件停靠位置
offset控件偏移值
size缩略地图控件的大小
isOpen缩略地图添加到地图后的开合状态

事件

事件名描述
viewchanged缩略地图开合状态发生变化后触发此事件
viewchanging缩略地图开合状态发生变化过程中触发此事件

代码

<template>
  <baidu-map :center="center" :zoom="zoom"  :scroll-wheel-zoom='true'>
   <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng:113.331084, lat:23.112223 },
      zoom: 15,
    };
  }
};
</script>

效果
在这里插入图片描述

定位控件

BmGeolocation

属性

属性名描述
anchor控件停靠位置
offset控件偏移值
showAddressBar是否显示定位信息面板。默认显示定位信息面板
autoLocation添加控件时是否进行定位。根据 W3C相关标准 描述，为保证用户隐私安全，geoLocation API 必须使用 SSL 连接，并获得用户的手动许可。请确保使用该属性时满足上述条件。
locationIcon可自定义定位中心点的Icon样式

事件

事件名描述
locationSuccess定位成功后触发此事件
locationError定位失败后触发此事件

代码

<template>
  <baidu-map :center="center" :zoom="zoom"  :scroll-wheel-zoom='true'>
  <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng:113.331084, lat:23.112223 },
      zoom: 15,
    };
  }
};
</script>

效果
在这里插入图片描述

版权控件

BmCopyright

属性

属性名描述
anchor控件停靠位置
offset控件偏移值
copyright版权信息列表

代码

<template>
  <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true">
     <bm-copyright
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>我是版权信息</a>'}]">
    </bm-copyright>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 113.331084, lat: 23.112223 },
      zoom: 15,
    };
  },
};
</script>

效果
在这里插入图片描述

城市列表

BmCityList城市列表控件仅在地图视图尺寸足够大时生效。

属性

属性名描述
anchor控件停靠位置
offset控件偏移值
showAddressBar是否显示定位信息面板。默认显示定位信息面板
autoLocation添加控件时是否进行定位。根据 W3C相关标准 描述，为保证用户隐私安全，geoLocation API 必须使用 SSL 连接，并获得用户的手动许可。请确保使用该属性时满足上述条件。
locationIcon可自定义定位中心点的Icon样式

事件

事件名描述
changeBefore切换城市前触发此事件
changeAfter切换城市后触发此事件

代码

<template>
  <baidu-map :center="center" :zoom="zoom"  :scroll-wheel-zoom='true'>
  	<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng:113.331084, lat:23.112223 },
      zoom: 15,
    };
  }
};
</script>

效果
在这里插入图片描述

城市列表

BmPanorama
属性

属性名描述
anchor控件停靠位置
offset控件偏移值

代码

<template>
  <baidu-map :center="center" :zoom="zoom"  :scroll-wheel-zoom='true'>
  	<bm-panorama></bm-panorama>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng:113.331084, lat:23.112223 },
      zoom: 15,
    };
  }
};
</script>

效果
在这里插入图片描述

自定义控件

BmControl组件允许开发者自由定制控件
由于受到百度地图的鼠标滚轮缩放机制影响，在自定义控件组件中使用鼠标滚轮操作一个 DOM 元素的滚动条会失效，该问题可以通过阻止自定义控件的 wheel 事件冒泡来解决。
属性

属性名描述
anchor控件停靠位置
offset控件偏移值

代码

<template>
  <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true">
     <bm-control>
      <button @click="addZoom(19)">缩放至最大</button>
      <button @click="addZoom(10)">还原</button>
      <button @click="addZoom(3)">缩放至最小</button>
    </bm-control>
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 113.331084, lat: 23.112223 },
      zoom: 15,
    };
  },
  methods: {
    addZoom (level) {
      this.zoom = level
    }
  }
};
</script>

效果
在这里插入图片描述

引入第三方测距插件

代码

<template>
  <baidu-map :zoom="zoom" :center="center" @ready="setDistanceToolInstance">
    <bm-control>
      <button @click="openDistanceTool">开启测距</button>
    </bm-control>
  </baidu-map>
</template>

<script>
import DistanceTool from "bmaplib.distancetool";

export default {
  data() {
    return {
      center: { lng: 113.331084, lat: 23.112223 },
      zoom: 15,
    };
  },
  unmount() {
    distanceTool && distanceTool.close();
  },
  methods: {
    setDistanceToolInstance({ map }) {

      this.distanceTool = new DistanceTool(map, { lineStroke: 2 });
    },
    openDistanceTool(e) {
      const { distanceTool } = this;
      distanceTool && distanceTool.open();
    },
  },
};
</script>

效果

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值