echarts石家庄市地图根据经纬度显示自定义html弹窗

数据可视化大屏项目中经常会遇到需要渲染echarts地图的情况，为了方便不同地区的数据使用，将一些地图数据整理出来，供大家参考，今天为大家整理的是echarts石家庄市地图根据经纬度显示自定义html弹窗。

石家庄市，简称“石”，旧称石门，河北省辖地级市、省会、Ⅰ型大城市，是国务院批复确定的中国京津冀地区重要的中心城市之一。截至2021年，全市下辖8个区、11个县，代管3个县级市，总面积14530平方千米，常住人口1120.47万人，城镇人口796.52万人，城镇化率71.09%。

效果截图

echarts石家庄市地图根据经纬度显示自定义html弹窗

echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.

echarts石家庄市地区地图geoJson数据

echarts石家庄市地区地图geoJson数据-飞线图

echarts石家庄市地区地图geoJson数据-自定义文字样式

石家庄市包含了长安区,桥西区,新华区,井陉矿区,裕华区,藁城区,鹿泉区,栾城区,井陉县,正定县,行唐县,灵寿县,高邑县,深泽县,赞皇县,无极县,平山县,元氏县,赵县,辛集市,晋州市,新乐市。

石家庄市地区名称编码对照表


[{
	"name": "长安区",
	"code": 130102
}, {
	"name": "桥西区",
	"code": 130104
}, {
	"name": "新华区",
	"code": 130105
}, {
	"name": "井陉矿区",
	"code": 130107
}, {
	"name": "裕华区",
	"code": 130108
}, {
	"name": "藁城区",
	"code": 130109
}, {
	"name": "鹿泉区",
	"code": 130110
}, {
	"name": "栾城区",
	"code": 130111
}, {
	"name": "井陉县",
	"code": 130121
}, {
	"name": "正定县",
	"code": 130123
}, {
	"name": "行唐县",
	"code": 130125
}, {
	"name": "灵寿县",
	"code": 130126
}, {
	"name": "高邑县",
	"code": 130127
}, {
	"name": "深泽县",
	"code": 130128
}, {
	"name": "赞皇县",
	"code": 130129
}, {
	"name": "无极县",
	"code": 130130
}, {
	"name": "平山县",
	"code": 130131
}, {
	"name": "元氏县",
	"code": 130132
}, {
	"name": "赵县",
	"code": 130133
}, {
	"name": "辛集市",
	"code": 130181
}, {
	"name": "晋州市",
	"code": 130183
}, {
	"name": "新乐市",
	"code": 130184
}]