c-chengc1/zhgh_nau
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:暂时屏蔽外部资源加载，解决页面加载缓慢问题

Browse Source
This commit is contained in:
c-chengc1
2026-11-06 09:19:33 +08:00
parent fdefa440bb
commit d80a88507a
21 changed files with 4262 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/assets/platform/js/util/mapSdkLoader.js
+86
View File
@@ -0,0 +1,86 @@
(function (window, document) {
'use strict'
if (window.loadMapSdk) return
const entry = document.currentScript
const sources = {
amap: entry.getAttribute('data-amap-url'),
tencent: entry.getAttribute('data-tencent-url')
}
const pending = {}
let sequence = 0
function getSdk(provider) {
const sdk = provider === 'amap' ? window.AMap : window.TMap
if (!sdk || !sdk.Map) return null
if (provider === 'amap') return sdk.PlaceSearch && sdk.PolylineEditor ? sdk : null
return sdk.LatLng && sdk.MultiMarker && sdk.tools && sdk.tools.GeometryEditor ? sdk : null
}
// 仅在打开地图时请求 SDK；同一地图服务的并发调用共用一次加载，避免阻塞公共页面。
window.loadMapSdk = function (provider) {
if (!sources[provider]) return Promise.reject(new Error('未配置地图服务地址'))
const sdk = getSdk(provider)
if (sdk) return Promise.resolve(sdk)
if (pending[provider]) return pending[provider]
const request = new Promise(function (resolve, reject) {
const script = document.createElement('script')
const callback = '__mapSdkReady_' + (++sequence)
const name = provider === 'amap' ? '高德地图' : '腾讯地图'
let finished = false
let timer
function finish(error) {
if (finished) return
const loaded = getSdk(provider)
if (!error && !loaded) return
finished = true
clearTimeout(timer)
script.onerror = null
// 超时后 SDK 仍可能迟到，保留空回调，避免迟到请求抛出全局异常。
window[callback] = function () {}
if (error) {
script.remove()
reject(error)
} else {
resolve(loaded)
}
}
window[callback] = function () { finish() }
script.async = true
script.charset = 'utf-8'
if (entry.nonce) script.nonce = entry.nonce
script.src = sources[provider] + '&callback=' + callback
script.onerror = function () {
finish(new Error(name + '加载失败，当前网络无法连接地图服务，请稍后重新打开地图'))
}
timer = setTimeout(function () {
finish(new Error(name + '加载超时，请稍后重新打开地图；其他功能可继续使用'))
}, 8000)
document.head.appendChild(script)
})
pending[provider] = request
// 失败不永久缓存，恢复网络后重新打开地图即可重试。
request.then(function () {
if (pending[provider] === request) delete pending[provider]
}, function () {
if (pending[provider] === request) delete pending[provider]
})
return request
}
// 业务弹窗使用已有消息组件提示；返回 false 只终止本次地图初始化。
window.ensureMapSdk = function (provider) {
return window.loadMapSdk(provider).then(function () {
return true
}).catch(function (error) {
if (!error.mapMessageShown) {
error.mapMessageShown = true
if (window.vant && window.vant.Toast) window.vant.Toast(error.message)
else if (window.ELEMENT && window.ELEMENT.Message) window.ELEMENT.Message.error(error.message)
}
return false
})
}
})(window, document)
src/main/resources/static/assets/platform/plugins/animate/animate.css
Vendored
+4072
View File
File diff suppressed because it is too large Load Diff
src/main/resources/static/assets/platform/plugins/weui/weui.min.css
Vendored
+5
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/components/module/activity/ActivityScheduleCalendar.vue
+9 -3
View File
@@ -447,9 +447,15 @@ module.exports = {
this.map.fitBounds(bounds)
},
// 仅在侧滑弹框完全展开后创建地图，保证容器已有可用尺寸，避免动画期间地图空白。
initMap() {
if (!this.positionConfirmVisible || !this.showMap || !this.row.courseLocationCoordinates || typeof TMap === "undefined") return
const position = JSON.parse(this.row.courseLocationCoordinates)
async initMap() {
if (!this.positionConfirmVisible || !this.showMap || !this.row.courseLocationCoordinates) return
const row = this.row
const requestId = (this.mapLoadRequestId || 0) + 1
this.mapLoadRequestId = requestId
if (!await window.ensureMapSdk('tencent')) return
// 加载期间可能切换活动或关闭弹窗，迟到的响应不能重新创建旧地图。
if (requestId !== this.mapLoadRequestId || this._isDestroyed || !this.positionConfirmVisible || !this.showMap || this.row !== row) return
const position = JSON.parse(row.courseLocationCoordinates)
const center = new TMap.LatLng(position[0], position[1])
this.destroyMap()
this.map = new TMap.Map(this.mapContainerId, { zoom: 16, center })
src/main/resources/static/components/plugins/mapContainer/MapContainer.vue
+7 -3
View File
@@ -5,6 +5,7 @@
v-model="addressValue"
style="width: 100%"
:fetch-suggestions="querySearchAsync"
:disabled="!map"
placeholder="请输入关键词查询地址"
@select="handleSelect"
/>
@@ -48,7 +49,7 @@ module.exports = {
},
methods: {
handleSelect(item) {
if (item.location) {
if (this.map && item.location) {
// 定位到中心点
this.map.setCenter(item.location)
// TODO 获取数据，对数据进行操作如：添加marker等
@@ -58,7 +59,8 @@ module.exports = {
}
},
querySearchAsync(queryString, cb) {
if (!queryString) {
if (!queryString || !this.placeSearchComponent) {
cb([])
return
}
this.placeSearchComponent.search(queryString, function (status, result) {
@@ -71,7 +73,9 @@ module.exports = {
}
})
},
initMap() {
async initMap() {
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed) return
this.map = new AMap.Map("mapContainer", {
// 设置地图容器id
resizeEnable: true,
src/main/resources/static/components/plugins/mapContainer/TMap.vue
+1 -1
View File
@@ -94,7 +94,7 @@ module.exports = {
if (this.mapDisposed || this.map || this.mapLoading) return
this.mapLoading = true
this.mapError = ''
return Promise.resolve().then(() => {
return window.loadMapSdk('tencent').then(() => {
if (this.mapDisposed) return null
if (typeof TMap === 'undefined' || !TMap.Map || !TMap.LatLng) {
throw new Error('腾讯地图脚本未加载成功，请刷新页面后重试')
src/main/resources/views/layouts/platform_h5.html
+6 -9
View File
@@ -10,10 +10,10 @@
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vant/index.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/h5.css"/>
<link rel="stylesheet" href="https://cdn.staticfile.net/animate.css/4.1.1/animate.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/animate/animate.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/css/pdf/pdfh5.css">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.2.0/weui.min.css">
<link rel="stylesheet" href="${base!}/assets/platform/plugins/weui/weui.min.css">
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
<script src="${base!}/assets/platform/plugins/vuex/vuex.js"></script>
@@ -30,7 +30,7 @@
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
<!--nprogress 配合pjax使用-->
<link rel="stylesheet" href="https://cdn.staticfile.net/nprogress/0.2.0/nprogress.css"/>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/nprogress/nprogress.css"/>
<script src="${base!}/assets/platform/plugins/nprogress/nprogress.js"></script>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css"/>
@@ -72,12 +72,9 @@
<script src="${base!}/assets/platform/plugins/g2plot/g2plot.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/goober@2.1.10/dist/goober.umd.js"></script>-->
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=57f0d098ba1b881ecc436c4cfd23bbbf&plugin=AMap.PolyEditor,AMap.Geolocation"
></script>
<script src="https://map.qq.com/api/gljs?v=2.exp&key=NYNBZ-K62KI-DQJGU-U4NJ5-CSME7-ULFMU"></script>
<script nonce="${cspNonce!}" src="${base!}/assets/platform/js/util/mapSdkLoader.js"
data-amap-url="https://webapi.amap.com/maps?v=2.0&key=57f0d098ba1b881ecc436c4cfd23bbbf&plugin=AMap.PlaceSearch,AMap.PolylineEditor,AMap.Geolocation"
data-tencent-url="https://map.qq.com/api/gljs?v=2.exp&key=NYNBZ-K62KI-DQJGU-U4NJ5-CSME7-ULFMU&libraries=tools"></script>
<script nonce="${cspNonce!}">
Vue.config.devtools = true
src/main/resources/views/layouts/v4/baseLayout.html
+3 -1
View File
@@ -103,7 +103,9 @@
src="https://webapi.amap.com/maps?v=2.0&key=b4fa2e2bc10a725ab007b98a3aa447cc&plugin=AMap.PolyEditor,AMap.Geolocation"
></script>-->
<script src="https://map.qq.com/api/gljs?v=2.exp&key=NYNBZ-K62KI-DQJGU-U4NJ5-CSME7-ULFMU"></script>
<script nonce="${cspNonce!}" src="${base!}/assets/platform/js/util/mapSdkLoader.js"
data-amap-url="https://webapi.amap.com/maps?v=2.0&key=b4fa2e2bc10a725ab007b98a3aa447cc&plugin=AMap.PlaceSearch,AMap.PolylineEditor,AMap.Geolocation"
data-tencent-url="https://map.qq.com/api/gljs?v=2.exp&key=NYNBZ-K62KI-DQJGU-U4NJ5-CSME7-ULFMU&libraries=tools"></script>
<script nonce="${cspNonce!}">
// 在加载 lodash 后、使用前插入
src/main/resources/views/layouts/v4/platform.html
+1 -2
View File
@@ -7,8 +7,7 @@
<link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css" />
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.net/element-ui/2.15.14/theme-chalk/index.css" />
<link rel="stylesheet" href="https://cdn.staticfile.net/element-ui/2.15.14/theme-chalk/fonts/element-icons.woff" />
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css" />
<!-- import Vue before Element -->
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
src/main/resources/views/platform/sys/h5Login.html
+1 -1
View File
@@ -196,7 +196,7 @@
</body>
<!-- import Vue before Element -->
<!--<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>-->
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.js"></script>
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
<!-- import JavaScript -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<script src="${base!}/assets/platform/plugins/jquery/jquery.js"></script>
src/main/resources/views/platform/zhgh/activity/family/apply/courseList.js
+3 -1
View File
@@ -237,11 +237,13 @@ const courseList = {
this.courseTimeList = resp.data
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
const viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhgh/activity/family/manage/info.js
+3 -1
View File
@@ -82,11 +82,13 @@ const info = {
this.courseTimeList = courseTimeList
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhgh/activity/fellowship/apply/courseList.js
+3 -1
View File
@@ -236,11 +236,13 @@ const courseList = {
this.courseTimeList = resp.data
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
const viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhgh/activity/fellowship/manage/info.js
+3 -1
View File
@@ -79,11 +79,13 @@ const info = {
this.courseTimeList = courseTimeList
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhgh/activity/fitnesswalk/activityManage.html
+17 -5
View File
@@ -1461,10 +1461,14 @@ layout("/layouts/platform.html"){
this.viewMap()
}
},
viewMap() {
async viewMap() {
if (!this.hasMapCenterPoint()) {
return
}
const requestId = (this.viewMapRequestId || 0) + 1
this.viewMapRequestId = requestId
if (!await window.ensureMapSdk('tencent')) return
if (requestId !== this.viewMapRequestId || this._isDestroyed || !this.viewDialogVisible || this.activeName !== '2') return
this.$nextTick(() => {
let path = this.viewData.linePoints.map(v => {
return [v.coordinates[0], v.coordinates[1]]
@@ -1681,10 +1685,14 @@ layout("/layouts/platform.html"){
this.formData._id ? this.doEdit() : this.doAdd()
}
},
xlMap() {
async xlMap() {
if (!this.hasMapCenterPoint()) {
return
}
const requestId = (this.xlMapRequestId || 0) + 1
this.xlMapRequestId = requestId
if (!await window.ensureMapSdk('tencent')) return
if (requestId !== this.xlMapRequestId || this._isDestroyed || this.stepActive !== 2) return
const center = new TMap.LatLng(this.appMapCenterPointY, this.appMapCenterPointX)
this.lineMap = new TMap.Map("xlMap", {
resizeEnable: true,
@@ -1834,10 +1842,14 @@ layout("/layouts/platform.html"){
}],
});
},
xlMap2() {
async xlMap2() {
if (!this.hasMapCenterPoint()) {
return
}
const requestId = (this.xlMap2RequestId || 0) + 1
this.xlMap2RequestId = requestId
if (!await window.ensureMapSdk('amap')) return
if (requestId !== this.xlMap2RequestId || this._isDestroyed || this.stepActive !== 2) return
let map = new AMap.Map("xlMap", {
resizeEnable: true,
center: [this.appMapCenterPointX, this.appMapCenterPointY],
@@ -1905,7 +1917,7 @@ layout("/layouts/platform.html"){
// 缩放地图到合适的视野级别
map.setFitView([polyline])
this.polyEditor = new AMap.PolyEditor(map, polyline)
this.polyEditor = new AMap.PolylineEditor(map, polyline)
this.polyEditor.open()
this.polyEditor.on('end', (event) => {
let points = event.target.getPath()
@@ -1933,7 +1945,7 @@ layout("/layouts/platform.html"){
})
if (this.formData.isMultipleLines) {
this.polyEditor2 = new AMap.PolyEditor(map, polyline2)
this.polyEditor2 = new AMap.PolylineEditor(map, polyline2)
this.polyEditor2.open()
this.polyEditor2.on('end', (event) => {
let points = event.target.getPath()
src/main/resources/views/platform/zhgh/activity/trainSignUp/apply/courseList.js
+3 -1
View File
@@ -236,11 +236,13 @@ const courseList = {
this.courseTimeList = resp.data
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
const viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhgh/activity/trainSignUp/manage/info.js
+3 -1
View File
@@ -79,11 +79,13 @@ const info = {
this.courseTimeList = courseTimeList
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhgh/dayofficework/literacy/apply/courseList.js
+3 -1
View File
@@ -236,11 +236,13 @@ const courseList = {
this.courseTimeList = resp.data
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
const viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhgh/dayofficework/literacy/manage/info.js
+3 -1
View File
@@ -79,11 +79,13 @@ const info = {
this.courseTimeList = courseTimeList
this.courseTimeListDialog = true
},
openViewMap(point) {
async openViewMap(point) {
if (!Array.isArray(point)) {
this.$message.warning("没有设置点位，无法通过地图查看")
return
}
if (!await window.ensureMapSdk('amap')) return
if (this._isDestroyed || this._isBeingDestroyed || this.viewMapDialog) return
this.viewMapDialog = true
this.$nextTick(() => {
viewMap = new AMap.Map("viewMap", {
src/main/resources/views/platform/zhghh5/activity/trainSignUp/common/times.js
+15 -7
View File
@@ -63,12 +63,15 @@ const times = {
onOpen(row) {
this.row = row
this.visible = true
this.$nextTick(() => {
this.$nextTick(async () => {
if(this.row.signType === 3) {
if(this.map) this.map.destroy()
this.initMap()
this.map = null
this.markerLayer = null
await this.initMap()
if (!this.visible || this.row !== row || !this.map) return
this.getLocation((coords) => {
if (coords) {
if (coords && this.visible && this.row === row && this.markerLayer) {
const center = new TMap.LatLng(coords.lat, coords.lng)
this.markerLayer.remove(["current"])
this.createMarker(center, 'current', 'current')
@@ -102,9 +105,9 @@ const times = {
this.visible = false
} else {
this.$toast(res.msg)
this.markerLayer.remove(["current"])
if (this.markerLayer) this.markerLayer.remove(["current"])
this.getLocation((coords) => {
if (coords) {
if (coords && this.visible && this.map && this.markerLayer) {
const center = new TMap.LatLng(coords.lat, coords.lng)
this.createMarker(center, 'current', 'current')
}
@@ -162,12 +165,17 @@ const times = {
}
);
},
initMap() {
async initMap() {
if(!this.row.courseLocationCoordinates) {
this.$toast('未设置签到点')
return
}
const posi = JSON.parse(this.row.courseLocationCoordinates)
const row = this.row
const requestId = (this.mapLoadRequestId || 0) + 1
this.mapLoadRequestId = requestId
if (!await window.ensureMapSdk('tencent')) return
if (requestId !== this.mapLoadRequestId || this._isDestroyed || !this.visible || this.row !== row) return
const posi = JSON.parse(row.courseLocationCoordinates)
const center = new TMap.LatLng(posi[0], posi[1])
this.map = new TMap.Map('mapContainer', {
resizeEnable: true,
src/main/resources/views/platform/zhghh5/activity/trainSignUp/scan/index.html
+15 -8
View File
@@ -41,16 +41,20 @@ layout("/layouts/platform_h5.html"){
return {
courseId: GetQueryString('courseId'),
markerLayer: null,
currentPosition: null,
map: null,
res: {},
}
},
methods: {
initMap() {
async initMap() {
if(!this.row.courseLocationCoordinates) {
this.$toast('未设置签到点')
return
}
if (!await window.ensureMapSdk('tencent')) return
if (this._isDestroyed || this._isBeingDestroyed) return
await this.$nextTick()
const posi = this.row.courseLocationCoordinates
const center = new TMap.LatLng(posi[0], posi[1])
this.map = new TMap.Map('mapContainer', {
@@ -70,6 +74,14 @@ layout("/layouts/platform_h5.html"){
})
this.createMarker(center)
this.createCircle(center)
this.showCurrentPosition()
},
// 定位和签到独立于地图下载；先返回的定位结果在地图就绪后补画。
showCurrentPosition() {
if (!this.map || !this.markerLayer || !this.currentPosition) return
this.markerLayer.remove(["current"])
const center = new TMap.LatLng(this.currentPosition[0], this.currentPosition[1])
this.createMarker(center, 'current', 'current')
},
createMarker(position, styleId = 'marker', id = 'marker_' + Date.now()) {
this.markerLayer.add([
@@ -103,13 +115,8 @@ layout("/layouts/platform_h5.html"){
lat: pos.coords.latitude,
lng: pos.coords.longitude
});
if (this.markerLayer) {
this.markerLayer.remove(["current"])
}
const transPosi = this.$coordinateUtil.wgs84ToGcj02(pos.coords.longitude, pos.coords.latitude)
console.log(transPosi)
const center = new TMap.LatLng(transPosi[0], transPosi[1])
this.createMarker(center, 'current', 'current')
this.currentPosition = this.$coordinateUtil.wgs84ToGcj02(pos.coords.longitude, pos.coords.latitude)
this.showCurrentPosition()
},
(err) => {
console.log(err)