需求背景
项目开发中需要做省市区地图 并在地图上根据经纬度进行点位标记 并且伴有不同点位用不同图标进行展示
实现过程
点位经纬度我是在经纬度查询定位 拾取坐标系统 经纬度查询地图进行获取的 试过好几个免费网站 只有这个网站比较准确 但是有获取次数的限制 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' // 鼠标悬停时的标点颜色
}
}
})
}