百度地图在vue中的使用

地图在vue中的使用"/>

百度地图在vue中的使用

1. 可以使用vue-baidu-map这个插件，专门针对vue的百度地图插件
   官网地址
   百度地图实例demo
2. 在vue项目中使用
   在main.js 中

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见  */ak: 'YOUR_APP_KEY'
})

在vue文件中

<template><baidu-map:min-zoom="11"@ready="handler"@zoomend="handleZoom"class="map":center="'北京'":zoom="zoom"scroll-wheel-zoom></baidu-map>
</template>

3. 在style中给map设置高度，否则地图不会显示

<style lang="less" scoped>
.map {width: 100%;height: 300px;
}
</style>

说明

baidu-map的常用属性

• min-zoom：最小层级
• center：地图的中心定位 可以是文字 也可以是对象，如{lng: 116.404, lat: 39.915}
• zoom: 缩放的等级
• scroll-wheel-zoom：是否允许鼠标滚轮缩放 默认是false

事件

• ready：地图加载开始执行的函数 他有两个参数一个是BMap一个是map 如果想在组件中使用他们，可以通过赋值

handler ({ BMap, map }) {this.map = mapthis.BMap = BMap
}

• zoomend：地图更改缩放级别结束时触发触发此事件

handleZoom (v) {this.zoom = v.target.getZoom() // 可以通过这个方法获取到当前地图的层级
}

百度地图常用的用过的方法记录

• 设置地图的中心点以及缩放层级 第一个参数可以是文字也是是坐标

this.map.centerAndZoom('北京', 11) 

• 仅仅只设置地图的中心点 要注意地图的中心点不能仅仅是一个有lng和lat的对象要通过BMap.Point 生成的坐标才有效，以上centerAndZoom方法也是这样

this.map.setCenter(new this.BMap.Point(111, 222)
)

其余可查看地图文档

vue-baidu-map常用的组件记录：

海量点组件

<!-- 海量图 所有的定位 -->
<bm-point-collection@click="handlePointCollection":points="allMarkers"shape="BMAP_POINT_SHAPE_STAR"size="BMAP_POINT_SIZE_HUGE"color="red"
/>

label组件

<bm-label:label-style="labelStyle"@click="clickLabel(marker)":content="marker | filtersContent(zoom)":position="{ lng: marker.longitude, lat: marker.latitude }":offset="{ width: -40, height: 8 }"
/>

data () {return {labelStyle: {opacity: 0.9,border: 'none',color: 'white','background-color': 'transparent','font-size': '16px','text-align': 'center'}}
}

其余组件看vue-baidu-map 官网
做过的项目例子：
效果： 模仿58实现点击label放大层级 显示大层级下的小层级效果
全部代码：

<template><div><!-- 百度地图 --><baidu-map:v-loading="loading":min-zoom="11"@ready="handler"@zoomend="handleZoom"class="map":center="'北京'":zoom="zoom"scroll-wheel-zoom><!-- 大区域 and 小区域 --><div v-show="zoom >= 11 && zoom <= 16"><div v-for="marker in markers" :key="marker.longitude + Math.random()"><bm-label:label-style="labelStyle"@click="clickLabel(marker)":content="marker | filtersContent(zoom)":position="{ lng: marker.longitude, lat: marker.latitude }":offset="{ width: -40, height: 8 }"/></div></div><!-- 海量图 所有的定位 --><bm-point-collectionv-if="zoom >= 17"@click="handlePointCollection":points="allMarkers"shape="BMAP_POINT_SHAPE_STAR"size="BMAP_POINT_SIZE_HUGE"color="red"/></baidu-map></div>
</template><script>export default {data () {return {labelStyle: {opacity: 0.9,border: 'none',color: 'white','background-color': 'transparent','font-size': '16px','text-align': 'center'},active: false,markers: [],bigMarkers: [], // 大区域的数据smallMarkers: [], // 小区域的数据allMarkers: [], // 所有店铺区域的精细数据zoom: 14,map: {},BMap: {}}},filters: {filtersContent (marker, zoom) {let str = ''if (zoom >= 11 && zoom <= 13) {str = `<div class="BMapLabel_big"><div style="margin: 0 0 10px">${marker.area_name}</div>${marker.total}套</div>`} else if (zoom >= 14 && zoom <= 16) {str = `<div class="BMapLabel_small">${marker.area_name}</div>`}return str}},watch: {zoom: {handler (value) {if (value >= 11 && value <= 13) {this.markers = this.bigMarkers} else if (value >= 14 && value <= 16) {this.markers = this.smallMarkers}},immediate: true}},methods: {/*** 关于地图的所有方法*/handler ({ BMap, map }) {this.map = mapthis.BMap = BMapconst city = this.$options.filters.city_name(this.current_store.city_id)map.centerAndZoom(city, 11) // 根据城市名设置中心位置this.getPointCollectionData(11) // 大区域this.getPointCollectionData(14) // 小区域this.getPointCollectionData(17) // 所有},handleZoom (v) {this.zoom = v.target.getZoom()},async getPointCollectionData (value) {const params = {big_class_value: this.params.big_class_value,small_class_value: this.params.small_class_value,acreage_value: this.params.acreage_value,city_id: this.current_store.city_id,stage_status: 3,mapBigArea: value === 11 ? 1 : undefined, // 大区域统计mapSmallArea: value === 14 ? 1 : undefined, // 小区域统计mapAll: value === 17 ? 1 : undefined, // 所有的地图定位big_area_value: value === 17 ? undefined : this.params.big_area_value,small_area_value: value === 17 ? undefined : this.params.small_area_value}await getTransferStore(params).then(res => {if (value === 11) {this.markers = this.bigMarkers = res.data.totalif (this.markers.length === 1 && !this.params.small_area_value) {this.map.setCenter(new this.BMap.Point(this.markers[0].longitude, this.markers[0].latitude))}} else if (value === 14) {this.smallMarkers = res.data.totalif (this.params.small_area_value) {const arr = this.bigMarkers.filter(item => item.id === this.params.big_area_value)if (!arr[0]) returnthis.clickLabel(arr[0])}} else if (value === 17) {this.allMarkers = []res.data.datas && res.data.datas.map(item => {this.allMarkers.push({lng: item.longitude,lat: item.latitude,area_name: item.area_name,id: item.id})})}})},// 点击label放大层级 并根据父级区域设置中心点clickLabel (marker) {if (this.zoom >= 11 && this.zoom <= 13) {this.zoom = 14this.formValidate.store_address.big_area_value = marker.idthis.params.big_area_value = marker.idthis.page = 1this.show()} else if (this.zoom >= 14 && this.zoom <= 16) {this.zoom = 17this.formValidate.store_address.small_area_value = marker.idthis.params.small_area_value = marker.idthis.page = 1this.show()}if (this.zoom >= 14 && this.zoom <= 16) {const arr = this.smallMarkers.filter(item => item.p_area_name === marker.area_name)if (arr.length === 0) returnthis.map.setCenter(new this.BMap.Point(arr[0].longitude, arr[0].latitude))} else if (this.zoom >= 17) {const arr = this.allMarkers.filter(item => item.area_name === marker.area_name)if (arr.length === 0) returnthis.map.setCenter(new this.BMap.Point(arr[0].lng, arr[0].lat))}},async handlePointCollection ({ currentTarget, point }) {const arr = this.allMarkers.filter(item => Number(item.lat) === point.lat && Number(item.lng) === point.lng)if (arr.length === 0) returnconst res = await getTransferStore({ id: arr[0].id, sign_detail: 1 })this.dataList = res.data.datas.datathis.total = res.data.datas.total}}
}
</script><style lang="less" scoped>
.map {width: 100%;height: 300px;
}
</style>