vue 百度地图 修改折线颜色,添加icon和文字标注

百度地图 折线修改颜色,添加icon和文字标注

项目场景:
以折线的形式展示BD签到路径,每条折线代表不同BD的签到,并且每条折线颜色不同(这里是8个颜色,循环设置),标注文字为依次签到的地点数量;

说明:原本我打算全部用Vue集成的 vue-baidu-map来实现,但是后面开发过程中,发现修改折线颜色、添加icon和文字比较困难,所以改用了原生 BMap来实现。

具体步骤:

1、安装依赖

npm install vue-baidu-map --save

2、引入需要的组件

import {
   
    BaiduMap, BmNavigation } from 'vue-baidu-map/components';

3、模板中使用组件

<baidu-map
	class="bm-view"
    :ak="mapAk"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="scrollZoom"
    NavigationControlType="BMAP_NAVIGATION_CONTROL_LARGE"
    @ready="mapReady">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
</baidu-map>

4、data中定义数据
1)基础数据
在这里插入图片描述
2)colorList:存放折线的颜色和标注icon
在这里插入图片描述
3)mapList:存放坐标点数据

mapList: [
	[
		{
   
    lng: 116.404, lat: 39.915 },
		{
   
    lng: 116.403, lat: 39.914 },
	]
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值