Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
21e9686b 1 parent bd46f412

feat: 添加地图加载中的默认标题并优化标记创建 

设置默认标题避免显示undefined，优化标记创建逻辑使其更清晰
Inline Side-by-side
Showing 2 changed files with 20 additions and 10 deletions
<!--
* @Date: 2023-05-31 16:10:33
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-06 10:16:37
* @LastEditTime: 2025-09-18 09:49:26
* @FilePath: /map-demo/index.html
* @Description: 文件描述
-->
......@@ -11,7 +11,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title></title>
<title>地图加载中...</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" /> -->
</head>
<body>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-08 10:46:16
* @LastEditTime: 2025-09-18 09:52:28
* @FilePath: /map-demo/src/views/checkin/map.vue
* @Description: 公众地图主体页面
-->
......@@ -189,6 +189,13 @@ export default {
*/
mapHeight() {
return this.isMiniProgramWebView ? 'calc(100vh - 80px)' : '100vh';
},
/**
* 获取地图缩放级别
* @returns {number} 地图缩放级别
*/
zoom() {
return this.data_zoom;
}
},
data() {
......@@ -312,6 +319,9 @@ export default {
}
},
async mounted() {
// 设置默认标题，避免显示undefined
document.title = '地图加载中...';
const AMap = await AMapLoader.load({
key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
version: '2.0', // 指定API版本
......@@ -424,7 +434,7 @@ export default {
createMarkerContent(entityInfo, textDirection, isSelected) {
const iconUrl = entityInfo.icon || '';
const name = entityInfo.name || '';
// 根据选中状态和文字方向选择样式
let textStyle, containerStyle;
if (textDirection === 'vertical') {
......@@ -434,12 +444,12 @@ export default {
textStyle = isSelected ? this.markerStyle2_horizontal : this.markerStyle1_horizontal;
containerStyle = 'flex-direction: row; align-items: center;';
}
// 将样式对象转换为CSS字符串
const textStyleStr = Object.entries(textStyle)
.map(([key, value]) => `${key}: ${value}`)
.join('; ');
// 创建HTML内容
const html = `
<div style="display: flex; ${containerStyle} cursor: pointer;">
......@@ -447,7 +457,7 @@ export default {
<div style="${textStyleStr}">${name}</div>
</div>
`;
return html;
},
initMap() {
......@@ -498,10 +508,10 @@ export default {
marker_icon = entity_info[i].icon;
}
let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
// 创建自定义HTML内容，包含图标和文字
const markerContent = this.createMarkerContent(entity_info[i], text_direction, false);
let textMarker = new AMap.Marker({
zooms: this.data_zooms, // 点标记显示的层级范围，使用地图配置的缩放范围
content: markerContent, // 自定义HTML内容
......@@ -526,7 +536,7 @@ export default {
}
}
});
// 设置当前标记为选中状态
const newContent = this.createMarkerContent(entity_info[i], text_direction, true);
textMarker.setContent(newContent);
......