echarts地图添加标记点及自定义图标(包含大小属性)/悬浮提示语方式

需求背景

项目开发中需要做省市区地图 并在地图上根据经纬度进行点位标记  并且伴有不同点位用不同图标进行展示 

实现过程

点位经纬度我是在经纬度查询定位 拾取坐标系统 经纬度查询地图进行获取的  试过好几个免费网站  只有这个网站比较准确  但是有获取次数的限制   option中series配置代码如下   symbol是设置点位展示的图标   我放的是放在静态文件下的图片  image://代表的是图标为图片的固定前缀  后面/public/redCross.jpg为路径

//在option中的series设置一个type为effectScatter进行设置点位
series.push({
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: [
        {
          name: '服务中心',
          value: [118.566778, 32.129121, 1],
          symbol: 'image:///public/redCross.jpg'
          //若不需要默认的提示 自定义的话可以在这里直接加tooltip  整体加的话就放到data平级
          tooltip:'服务中心'
        },
        {
          name: '服务中心',
          value: [118.628394, 32.04642, 1],
          symbol: 'image:///public/redCross.jpg'
        },
        {
          name: '社区医院',
          value: [118.517932, 31.9433, 1],
          symbol: 'image:///public/redCross.jpg'
        },
        {
          name: '服务中心',
          value: [118.414588, 31.939414, 1],
          symbol: 'image:///public/redCross.jpg'
        },
        {
          name: '服务中心',
          value: [118.450032, 32.028752, 1],
          symbol: 'image:///public/redCross.jpg'
        }
      ],
      symbolSize: 20, // 控制散点的大小
      label: {
        show: false // 不显示标点上的标签,避免重叠
      },
      emphasis: {
        itemStyle: {
          color: '#FF5733' // 鼠标悬停时的标点颜色
        }
      }
    })
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值