vue-baidu-map使用轨迹图(添加自定义图标)

效果图

在这里插入图片描述

代码

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>
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3组合式API中使用vue-baidu-map-3x自定义中心点,可以按照以下步骤: 1. 安装vue-baidu-map-3x 你可以通过以下命令使用npm安装vue-baidu-map-3x: ``` npm install vue-baidu-map-3x --save ``` 2. 在组合式API中引入vue-baidu-map-3x 在需要使用百度地图的组件中,你需要先引入vue-baidu-map-3x。例如,在一个名为Map.vue的组件中,你可以这样引入: ``` <script> import { defineComponent } from 'vue' import BaiduMap from 'vue-baidu-map-3x' export default defineComponent({ components: { BaiduMap }, setup() { // 组合式API的代码 } }) </script> ``` 3. 在setup函数中定义地中心点 在setup函数中,你可以定义地的中心点和缩放级别。例如: ``` <script> import { defineComponent } from 'vue' import BaiduMap from 'vue-baidu-map-3x' export default defineComponent({ components: { BaiduMap }, setup() { const center = { lng: 116.404, lat: 39.915 } const zoom = 12 return { center, zoom } } }) </script> ``` 在这个例子中,我们定义了地的中心点为北京市中心,缩放级别为12。 4. 在模板中使用 最后,在模板中使用vue-baidu-map-3x组件,并且传入定义的中心点和缩放级别。例如: ``` <template> <div class="map-container"> <baidu-map :center="center" :zoom="zoom"></baidu-map> </div> </template> ``` 现在,你已经在Vue3组合式API中使用vue-baidu-map-3x自定义了地的中心点。你可以通过修改center的值来改变地的中心点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值