fix(首页): 优化百度地图为3.0

This commit is contained in:
yang
2026-02-02 16:51:51 +08:00
parent 49dfb323c8
commit ef724814a0
3 changed files with 252 additions and 251 deletions

View File

@@ -18,11 +18,12 @@ export function loadBMap() {
document.head.appendChild(meta) document.head.appendChild(meta)
} }
// 引入百度地图 // 引入百度地图
let script = document.createElement('script') const script = document.createElement('script');
script.type = 'text/javascript' const ak = process.env.VUE_APP_BAI_DU_AK
script.src = script.type = 'text/javascript';
'http://api.map.baidu.com/api?v=2.0&ak='+ process.env.VUE_APP_BAI_DU_AK +'&s=1&__ec_v__=20190126&callback=onBMapCallback' script.src = `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=onBMapCallback`;
script.onerror = reject script.onerror = reject;
document.head.appendChild(script) document.head.appendChild(script);
}) })
} }

View File

@@ -161,130 +161,130 @@ export default {
zoom: 5, zoom: 5,
// 大屏用zomm缩放导致地图缩放中心点会偏移 // 大屏用zomm缩放导致地图缩放中心点会偏移
roam: 'move', roam: 'move',
mapStyle: { // mapStyle: {
styleJson: [{ // styleJson: [{
featureType: 'water', // featureType: 'water',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#3863db' // color: '#3863db'
} // }
}, // },
{ // {
featureType: 'land', // featureType: 'land',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#0e2e87' // color: '#0e2e87'
} // }
}, // },
{ // {
featureType: 'railway', // featureType: 'railway',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off' // visibility: 'off'
} // }
}, // },
{ // {
featureType: 'highway', // featureType: 'highway',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
color: '#fdfdfd' // color: '#fdfdfd'
} // }
}, // },
{ // {
featureType: 'highway', // featureType: 'highway',
elementType: 'labels', // elementType: 'labels',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
visibility: 'off' // visibility: 'off'
} // }
}, // },
{ // {
featureType: 'arterial', // featureType: 'arterial',
elementType: 'geometry', // elementType: 'geometry',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
color: '#fefefe' // color: '#fefefe'
} // }
}, // },
{ // {
featureType: 'arterial', // featureType: 'arterial',
elementType: 'geometry.fill', // elementType: 'geometry.fill',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
color: '#fefefe' // color: '#fefefe'
} // }
}, // },
{ // {
featureType: 'poi', // featureType: 'poi',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
visibility: 'off' // visibility: 'off'
} // }
}, // },
{ // {
featureType: 'green', // featureType: 'green',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off' // visibility: 'off'
} // }
}, // },
{ // {
featureType: 'subway', // featureType: 'subway',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off' // visibility: 'off'
} // }
}, // },
{ // {
featureType: 'manmade', // featureType: 'manmade',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
color: '#d1d1d1' // color: '#d1d1d1'
} // }
}, // },
{ // {
featureType: 'local', // featureType: 'local',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
color: '#d1d1d1' // color: '#d1d1d1'
} // }
}, // },
{ // {
featureType: 'arterial', // featureType: 'arterial',
elementType: 'labels', // elementType: 'labels',
stylers: { // stylers: {
visibility: 'off' // visibility: 'off'
} // }
}, // },
{ // {
featureType: 'boundary', // featureType: 'boundary',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#23cdd8' // color: '#23cdd8'
} // }
}, // },
{ // {
featureType: 'building', // featureType: 'building',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
color: '#d1d1d1' // color: '#d1d1d1'
} // }
}, // },
{ // {
featureType: 'label', // featureType: 'label',
elementType: 'labels.text.fill', // elementType: 'labels.text.fill',
stylers: { // stylers: {
color: '#264194', // color: '#264194',
visibility: 'off' // visibility: 'off'
} // }
} // }
] // ]
} // }
}, },
series: [{ series: [{
type: 'scatter', type: 'scatter',

View File

@@ -339,11 +339,11 @@ export default {
}, },
/**加载地图*/ /**加载地图*/
loadMap() { loadMap() {
this.$nextTick(() => { loadBMap().then(() => {
loadBMap().then(() => { setTimeout(() => {
this.getmap(); this.getmap(); // 里面有 setOption
}); }, 500);
}); })
}, },
/** 查询服务器信息 */ /** 查询服务器信息 */
getServer() { getServer() {
@@ -494,122 +494,122 @@ export default {
center: [133, 38], center: [133, 38],
zoom: 5, zoom: 5,
roam: true, roam: true,
mapStyle: { // mapStyle: {
styleJson: [ // styleJson: [
{ // {
featureType: 'water', // featureType: 'water',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#a0cfff', // color: '#a0cfff',
}, // },
}, // },
{ // {
featureType: 'land', // featureType: 'land',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#fafafa', // #fffff8 淡黄色 // color: '#fafafa', // #fffff8 淡黄色
}, // },
}, // },
{ // {
featureType: 'railway', // featureType: 'railway',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
}, // },
}, // },
{ // {
featureType: 'highway', // featureType: 'highway',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#fdfdfd', // color: '#fdfdfd',
}, // },
}, // },
{ // {
featureType: 'highway', // featureType: 'highway',
elementType: 'labels', // elementType: 'labels',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
}, // },
}, // },
{ // {
featureType: 'arterial', // featureType: 'arterial',
elementType: 'geometry', // elementType: 'geometry',
stylers: { // stylers: {
color: '#fefefe', // color: '#fefefe',
}, // },
}, // },
{ // {
featureType: 'arterial', // featureType: 'arterial',
elementType: 'geometry.fill', // elementType: 'geometry.fill',
stylers: { // stylers: {
color: '#fefefe', // color: '#fefefe',
}, // },
}, // },
{ // {
featureType: 'poi', // featureType: 'poi',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
}, // },
}, // },
{ // {
featureType: 'green', // featureType: 'green',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
}, // },
}, // },
{ // {
featureType: 'subway', // featureType: 'subway',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
}, // },
}, // },
{ // {
featureType: 'manmade', // featureType: 'manmade',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#d1d1d1', // color: '#d1d1d1',
}, // },
}, // },
{ // {
featureType: 'local', // featureType: 'local',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#d1d1d1', // color: '#d1d1d1',
}, // },
}, // },
{ // {
featureType: 'arterial', // featureType: 'arterial',
elementType: 'labels', // elementType: 'labels',
stylers: { // stylers: {
visibility: 'off', // visibility: 'off',
}, // },
}, // },
{ // {
featureType: 'boundary', // featureType: 'boundary',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#999999', // color: '#999999',
}, // },
}, // },
{ // {
featureType: 'building', // featureType: 'building',
elementType: 'all', // elementType: 'all',
stylers: { // stylers: {
color: '#d1d1d1', // color: '#d1d1d1',
}, // },
}, // },
{ // {
featureType: 'label', // featureType: 'label',
elementType: 'labels.text.fill', // elementType: 'labels.text.fill',
stylers: { // stylers: {
color: '#999999', // color: '#999999',
}, // },
}, // },
], // ],
}, // },
}, },
series: [ series: [
{ {