明树Git Lab

Commit af84499e authored by yangyajing's avatar yangyajing

调整地图交互样式

parent cd03062e
Pipeline #104348 passed with stage
in 12 seconds
...@@ -26,11 +26,9 @@ watch( ...@@ -26,11 +26,9 @@ watch(
// 根据页面内容,调整地图显示位置 // 根据页面内容,调整地图显示位置
const center = ["lixiang", "tuichu"].includes(props.tabKey) ? [100.808299, 35.791787] : [127.808299, 35.791787]; const center = ["lixiang", "tuichu"].includes(props.tabKey) ? [100.808299, 35.791787] : [127.808299, 35.791787];
map && map.setCenter(center); map && map.setCenter(center);
let zoom = map.getZoom(); map.setZoom(4);
if (zoom < 7) {
handleAddMarket(); handleAddMarket();
} }
}
); );
...@@ -245,16 +243,6 @@ const handleAddMarket = () => { ...@@ -245,16 +243,6 @@ const handleAddMarket = () => {
const markerData = positionsList[i]; const markerData = positionsList[i];
// 创建悬浮窗口内容 // 创建悬浮窗口内容
// const infoContent = `
// <div class="marker-info-window">
// <div class="marker-info-title">${markerData.province}</div>
// <div class="marker-info-content">
// <span class="marker-info-label">路线数量:</span>
// <span class="marker-info-value">${markerData.number}</span>
// <span class="marker-info-unit"></span>
// </div>
// </div>
// `;
let infoContent = ` let infoContent = `
<div class="infoWindow-title">${markerData.province}</div> <div class="infoWindow-title">${markerData.province}</div>
<div class="infoWindow-content"> <div class="infoWindow-content">
...@@ -270,8 +258,8 @@ const handleAddMarket = () => { ...@@ -270,8 +258,8 @@ const handleAddMarket = () => {
const infoWindow = new AMap.InfoWindow({ const infoWindow = new AMap.InfoWindow({
isCustom: true, isCustom: true,
content: infoContent, content: infoContent,
// offset: new AMap.Pixel(3, -3), offset: new AMap.Pixel(5, 0),
closeWhenClickMap: true, closeWhenClickMap: true
}); });
const marker = new AMap.Marker({ const marker = new AMap.Marker({
...@@ -283,16 +271,17 @@ const handleAddMarket = () => { ...@@ -283,16 +271,17 @@ const handleAddMarket = () => {
'<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 40px;height: 40px;">' + '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 40px;height: 40px;">' +
`<div class="anchorPoint">${markerData.number}</div>` + `<div class="anchorPoint">${markerData.number}</div>` +
"</div>", "</div>",
zIndex: 100
}); });
// 鼠标悬浮事件 // 鼠标悬浮事件
marker.on("mouseover", function (e) { marker.on("mouseover", function (e) {
infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]); infoWindow.open(map, markerData.position);
}); });
// 鼠标移出事件 // 鼠标移出事件
marker.on("mouseout", function () { marker.on("mouseout", function () {
infoWindow.close(); // infoWindow.close();
}); });
// 点击事件:聚焦到对应省份并显示省份地图 // 点击事件:聚焦到对应省份并显示省份地图
...@@ -588,3 +577,9 @@ onActivated(() => { ...@@ -588,3 +577,9 @@ onActivated(() => {
opacity: 0; opacity: 0;
} }
</style> </style>
<style lang="less">
.amap-info{
z-index: 2;
pointer-events: none;
}
</style>
\ No newline at end of file
...@@ -220,6 +220,7 @@ ...@@ -220,6 +220,7 @@
<el-table-column prop="xmzt" label="项目状态" :align="'center'" width="100" /> <el-table-column prop="xmzt" label="项目状态" :align="'center'" width="100" />
<el-table-column prop="tcsj" label="通车时间" width="110" :align="'center'"/> <el-table-column prop="tcsj" label="通车时间" width="110" :align="'center'"/>
<el-table-column prop="hbfs" label="回报方式" :align="'center'" width="150" /> <el-table-column prop="hbfs" label="回报方式" :align="'center'" width="150" />
<el-table-column prop="irr" label="IRR" :align="'center'" width="100" />
</el-table> </el-table>
</div> </div>
<!-- <div class="page-wrap"> <!-- <div class="page-wrap">
...@@ -1191,6 +1192,7 @@ const initProgressPie = () => { ...@@ -1191,6 +1192,7 @@ const initProgressPie = () => {
// 1. 外层圆环边框(浅色蓝环) // 1. 外层圆环边框(浅色蓝环)
{ {
type: "pie", type: "pie",
animationDuration: 2000,
radius: ["85%", "70%"], // 外层边框的粗细 radius: ["85%", "70%"], // 外层边框的粗细
startAngle: 0, startAngle: 0,
itemStyle: { itemStyle: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment