效果图
代码
vue使用先npm i vue-baidu-map
<template>
<div>
<button @click='changePoint'>请求新数据</button>
<baidu-map ak="izRxpkV0ohn1ZtobaWHXVhiiqVx7piRI"
:scroll-wheel-zoom="true"
:center="center"
:zoom="zoom"
@ready="mapReady"
:map-click="false"
class="baidu-map">
<!-- 显示比列尺在哪 -->
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
<!-- 导航工具 -->
<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
<!-- 轨迹 -->
<div v-if="pointLists.length > 1">
<bm-walking v-for="index in (pointLists.length-1)" :key="index" :start="pointLists[index-1].point" :end="pointLists[index].point"
:auto-viewport="true"
:panel='false'
@polylinesset="addMyIcon"
></bm-walking>
</div>
<div v-else-if="pointLists.length == 1">
<bm-marker v-if="oneIcon" :position="pointLists[0].point" :dragging="true" :icon="oneIcon" >
</bm-marker>
<bm-marker v-else :position="pointLists[0].point" :dragging="true">
</bm-marker>
</div>
</baidu-map>
</div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmScale from 'vue-baidu-map/components/controls/Scale';
import BmNavigation from 'vue-baidu-map/components/controls/Navigation';
import BmMarker from 'vue-baidu-map/components/overlays/Marker';
import BmPolyline from 'vue-baidu-map/components/overlays/Polyline.vue'
import BmWalking from 'vue-baidu-map/components/search/Walking.vue'
import quotagreen from '@/assets/quotagreen.png'
import quotared from '@/assets/quotared.png'
import { getPointLists } from '@/request/map'
export default {
components:{
BaiduMap,
BmScale,
BmNavigation,
BmPolyline,
BmWalking,
BmMarker
},
data(){
return {
oneIcon:'',
center: {
lng:116.404,
lat:39.915
},
zoom:13,
map:'',
pointLists: [],
BMap:'',
}
},
created(){
this.getPointLists()
},
methods:{
// 初始化
mapReady({ BMap , map }){
// 将地图实例拿出便于后续操作使用
this.map = map
this.BMap = BMap
// 清除地图上的标记物
this.map.clearOverlays();
// 给地图设置样式
map.setMapStyle({style:'grayscale'});
},
// 清楚图标
clearMarKer() {
let allOverlay = this.map.getOverlays();
for (var i = 0; i < allOverlay.length; i++){
if(allOverlay[i].toString().indexOf("Marker") > 0){//删除标志点
this.map.removeOverlay(allOverlay[i]);
}
}
},
// 清楚所有的轨迹和标志点
clearOverlay(){
let allOverlay = this.map.getOverlays();
for (var i = 0; i < allOverlay.length; i++){
if(allOverlay[i].toString().indexOf("Marker") > 0){//删除标志点
this.map.removeOverlay(allOverlay[i]);
}
if(allOverlay[i].toString().indexOf("Polyline") > 0){//删除折线
this.map.removeOverlay(allOverlay[i]);
}
}
},
// 添加自己的图标
addMyIcon(){
this.clearMarKer()
this.pointLists.forEach(item=>this.addMarker(item.point,item.hasP))
},
// 数据发生改变
async changePoint(){
this.clearOverlay()
await this.getPointLists()
},
// 依据数据选择图标
addMarker(point,hasp){
const map = this.map
const BMap = this.BMap
if(hasp){
var myIcon = new BMap.Icon(quotagreen, new BMap.Size(30, 30));
}else{
var myIcon = new BMap.Icon(quotared, new BMap.Size(30, 30));
}
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
map.addOverlay(marker);
},
// 发请求拿数据
async getPointLists(){
try {
const rst = await getPointLists()
this.pointLists = rst
this.center = this.pointLists[0].point
let img = this.pointLists[0] && this.pointLists[0].hasP ? quotagreen : quotagred
this.oneIcon = {url: img, size: {width: 300, height: 157}}
} catch (error) {
this.$message.error(error.message)
}
}
}
}
</script>
<style scoped lang='less'>
.baidu-map{
margin: 0 auto;
height: 600px;
width:1900px;
}
</style>