关于页面地图修改为可缩放地图（弃用静态图片方式）
This commit is contained in:
guoqi.sun
parent
f0af49263a
commit
822a3485e3
|
|
@ -1298,48 +1298,53 @@ spec:
|
|||
label: 51la 网站统计
|
||||
help: 统计ID
|
||||
placeholder: 请输入内容
|
||||
- $formkit: group
|
||||
name: map
|
||||
label: 地图相关配置
|
||||
value:
|
||||
StrengthenTitle:
|
||||
background:
|
||||
backgroundDark:
|
||||
authorInfo:
|
||||
children:
|
||||
- $formkit: text
|
||||
name: StrengthenTitle
|
||||
label: 居住地
|
||||
placeholder: 请输入内容
|
||||
- $formkit: attachment
|
||||
name: background
|
||||
label: 地图亮色模式背景
|
||||
placeholder: 请输入内容
|
||||
- $formkit: attachment
|
||||
name: backgroundDark
|
||||
label: 地图暗色模式背景
|
||||
placeholder: 请输入内容
|
||||
- $formkit: repeater
|
||||
name: authorInfo
|
||||
label: 个人信息
|
||||
min: 3
|
||||
max: 3
|
||||
children:
|
||||
- $formkit: text
|
||||
name: authorInfoTitle
|
||||
label: 标题
|
||||
placeholder: 请输入内容
|
||||
value: 标题
|
||||
- $formkit: text
|
||||
name: authorInfoContent
|
||||
label: 内容
|
||||
placeholder: 请输入内容
|
||||
value: 内容
|
||||
- $formkit: color
|
||||
name: authorInfoColor
|
||||
label: 内容颜色
|
||||
placeholder: 请输入内容
|
||||
value: '#ffffff'
|
||||
- $formkit: text
|
||||
name: mapLocation
|
||||
label: 居住地坐标
|
||||
help: 示例：22.5824,113.2154
|
||||
placeholder: 请输入经纬度坐标
|
||||
# - $formkit: group
|
||||
# name: map
|
||||
# label: 地图相关配置
|
||||
# value:
|
||||
# StrengthenTitle:
|
||||
# background:
|
||||
# backgroundDark:
|
||||
# authorInfo:
|
||||
# children:
|
||||
# - $formkit: text
|
||||
# name: StrengthenTitle
|
||||
# label: 居住地
|
||||
# placeholder: 请输入内容
|
||||
# - $formkit: attachment
|
||||
# name: background
|
||||
# label: 地图亮色模式背景
|
||||
# placeholder: 请输入内容
|
||||
# - $formkit: attachment
|
||||
# name: backgroundDark
|
||||
# label: 地图暗色模式背景
|
||||
# placeholder: 请输入内容
|
||||
# - $formkit: repeater
|
||||
# name: authorInfo
|
||||
# label: 个人信息
|
||||
# min: 3
|
||||
# max: 3
|
||||
# children:
|
||||
# - $formkit: text
|
||||
# name: authorInfoTitle
|
||||
# label: 标题
|
||||
# placeholder: 请输入内容
|
||||
# value: 标题
|
||||
# - $formkit: text
|
||||
# name: authorInfoContent
|
||||
# label: 内容
|
||||
# placeholder: 请输入内容
|
||||
# value: 内容
|
||||
# - $formkit: color
|
||||
# name: authorInfoColor
|
||||
# label: 内容颜色
|
||||
# placeholder: 请输入内容
|
||||
# value: '#ffffff'
|
||||
- $formkit: textarea
|
||||
name: xjlc
|
||||
label: 心路历程
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
|
||||
|
||||
<div class="author-content-item-group column mapAndInfo">
|
||||
<div class="author-content-item map single">
|
||||
<div class="author-content-item map single" style="padding: 0;">
|
||||
<div id="mapContainer" style="height: 120%;"></div>
|
||||
<span class="map-title">我现在住在
|
||||
<b>[[${theme.config.about.map.StrengthenTitle}]]</b></span>
|
||||
</div>
|
||||
|
|
@ -39,7 +40,7 @@
|
|||
th:text="${texts[2].authorInfoContent}">BI工程师</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
<!-- <style>
|
||||
.author-content-item.map {
|
||||
background: url([[${theme.config.about.map.background}]]) no-repeat center;
|
||||
min-height: 160px;
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
</div>
|
||||
<script th:src="@{/assets/libs/countup/countup.js}"></script>
|
||||
<script>
|
||||
|
|
@ -122,12 +123,45 @@
|
|||
};
|
||||
const observer = new IntersectionObserver(callback, options);
|
||||
observer.observe(statisticElement);
|
||||
}
|
||||
|
||||
}
|
||||
statisticUP()
|
||||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var e = document.createElement("script");
|
||||
e.type = "text/javascript",
|
||||
e.defer = !0,
|
||||
e.src = "https://map.qq.com/api/gljs?v=1.exp&key=YZOBZ-34HLF-K3OJV-JV6IN-OALJ5-7MBAC",
|
||||
document.body.appendChild(e);
|
||||
var t = new TMap.LatLng([[${theme.config.about.mapLocation}]])
|
||||
, n = new TMap.Map(document.getElementById("mapContainer"),{
|
||||
center: t,
|
||||
zoom: 12,
|
||||
// pitch: 43.5,
|
||||
// rotation: 45
|
||||
});
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM),
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION),
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE),
|
||||
new TMap.MultiMarker({
|
||||
map: n,
|
||||
styles: {
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 20,
|
||||
height: 30,
|
||||
anchor: {
|
||||
x: 10,
|
||||
y: 30
|
||||
}
|
||||
})
|
||||
},
|
||||
geometries: [{
|
||||
id: "marker",
|
||||
position: t
|
||||
}]
|
||||
}),
|
||||
document.querySelector("mapContainer div").querySelectorAll("div")[1].remove()
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue