Echarts绘制地图带标记tooltip
.agency_information {
width: 250px;
padding: 5px 0;
background: transparent;
border-radius: 5px;
}
.agency_title {
min-width: 150px;
height: auto;
margin-bottom: 6px;
font-size: 14px;
color: #ffffff;
font-weight: normal;
text-align: center;
}
.agency_type {
color: #fe0101;
}
.agency_info_row {
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: auto;
padding-left: 10px;
htmlborderbackground: #ffffff33;
margin-bottom: 4px;
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
.
agency_info_row > label:first-child {
width: 60px;
height: auto;
margin-right: 20px;
text-align: left;
}
<div class="map" id="map" ></div>
function ecMapServicer(name) {
var uploadedDataURL = "json/wuhan.json";
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.ElementById(name));
/
*  {name:'武汉', geoCoord:[114.31, 30.52]}, x-y坐标轴起点[113.45, 29.95] */
var data_type_1 = [{
type: "⼀类",
name: "五零四⽂化⼴场",
value: [114.31, 30.1222, 120]
},
{
type: "⼀类",
name: "五零四⽂化⼴场",
value: [114.41, 30.32, 120]
},
{
type: "⼀类",
name: "五零四⽂化⼴场",
value: [114.39, 30.52, 120]
},
{
type: "⼀类",
name: "五零四⽂化⼴场",
value: [114.73, 30.72, 120]
}
];
var data_type_2 = [{
type: "⼆类",
name: "五零四⽂化⼴场",
value: [114.2133, 30.1222, 120]
},
{
type: "⼆类",
name: "五零四⽂化⼴场",
value: [114.01, 30.3222, 120]
},
{
type: "⼆类",
name: "五零四⽂化⼴场",
value: [114.59, 30.82, 120]
},
{
type: "⼆类",
name: "五零四⽂化⼴场",
value: [114.73, 30.72, 120]
}
];
var data_type_3 = [{
type: "三类",
name: "五零四⽂化⼴场",
value: [114.27, 31.292, 120]
},
{
type: "三类",
name: "五零四⽂化⼴场",
value: [114.21, 30.72, 120]
},
{
type: "三类",
name: "五零四⽂化⼴场",
value: [114.429, 30.12, 120]
},
{
type: "三类",
name: "五零四⽂化⼴场",
value: [114.73, 30.62, 120]
}
];
// 显⽰加载动画
myChart.showLoading();
$.getJSON(uploadedDataURL, null, function (data) {    isterMap("mapData", data);
myChart.hideLoading();
option = {
color: ["#91c7ae", "#749f83", "#ca8622"], //颜⾊组      tooltip: {
trigger: "item",
show: true,
padding: 0,
backgroundColor: "#ffffff33",
formatter: function (params) {
<div class="agency_information">
<div class="agency_title">
${params.name}
<label class="agency_type">（${pe}）</label>          </div>
<div class="agency_info_row">
<label>建⽴时间：</label><label> 2007（使⽤）</label>
</div>
<div class="agency_info_row">
<label>负责⼈：</label><label> 张建华 </label>
</div>
<div class="agency_info_row">
<label>床位数： </label><label> 200 </label>
</div>
<div class="agency_info_row">
<label>联系⽅式：</label><label> 125697415266</label>
</div>
<div class="agency_info_row">
<label>地址：</label><label> 武汉市xxxxxxxx</label>
</div>
</div>
`;
return str;
/* if (typeof params.value[2] == "undefined") {
return params.name + " : " + params.value;
} else {
return params.name + " : " + params.value[2];
} */
}
},
grid: {
top: 100
},
legend: {
orient: "vertical",
icon: "pain",
right: '10%',
bottom: '10%',
itemWidth: 20,
itemHeight: 12,
align: "left",
textStyle: {
color: "#fff",
fontSize: 12
},
data: ["⼀类", "⼆类", "三类"]
},
xAxis: {
show: false
},
yAxis: {
show: false
},
geo: {
show: true,
map: "mapData",
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
areaColor: "#1A2B75",
borderColor: "#3fdaff",
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: "#2B91B7"
}
}
},
series: [
// ⼀类
{
name: "⼀类",
type: "scatter",
coordinateSystem: "geo",
symbol: "image://img/icon_location_1.png",//⾃⾏图标          symbolSize: [14, 16],
label: {
normal: {
show: false,
backgroundColor: "#0D1151",
position: "right",
color: "#ffffff",
fontSize: "14",
padding: 20
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#00A0E9", //控制图例和地图标记点的颜⾊
borderWidth: 2
}
},
data: data_type_1
},
// ⼆类
{
name: "⼆类",
type: "scatter",
coordinateSystem: "geo",
symbol: "image://img/icon_location_2.png",
symbolSize: [14, 16],
label: {
normal: {
show: false,
backgroundColor: "#2B91B7",
position: "right",
color: "#ffffff",
fontSize: "14",
padding: 20
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#11D53F", //控制图例和地图标记点的颜⾊
borderWidth: 2
}
},
data: data_type_2
},
// 三类
{
name: "三类",
type: "scatter",
coordinateSystem: "geo",
symbol: "image://img/icon_location_3.png",          symbolSize: [14, 16],
label: {
normal: {
show: false,
backgroundColor: "#2B91B7",
position: "right",
color: "#ffffff",
fontSize: "14",
padding: 20
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#E39F28",
borderWidth: 2
}
},
data: data_type_3
}
]
};
myChart.setOption(option);
});
myChart.setOption(option);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。