176 lines
5.9 KiB
JavaScript
176 lines
5.9 KiB
JavaScript
// 将地图相关的变量和函数提升到全局作用域
|
||
let map = null;
|
||
let marker = null;
|
||
let infoWindow = null;
|
||
|
||
// 地图数据配置
|
||
const mapData = {
|
||
address: {
|
||
zh: '广东省深圳市南山区高新中三道2号软件园一期7栋303室',
|
||
en: ''
|
||
},
|
||
companyName: {
|
||
zh: '深圳驭鑫科技有限公司',
|
||
en: ''
|
||
},
|
||
phone:{
|
||
zh: '13420976989',
|
||
en: '+86 13420976989'
|
||
},
|
||
|
||
contactInfo: {
|
||
zh: {
|
||
address: '地址',
|
||
phone: '电话',
|
||
email: '邮箱'
|
||
},
|
||
en: {
|
||
address: 'Address',
|
||
phone: 'Phone',
|
||
email: 'Email'
|
||
}
|
||
}
|
||
};
|
||
|
||
// 创建信息窗体内容
|
||
function createInfoWindowContent(lang) {
|
||
return `
|
||
<div class="info-content" style="padding: 15px;">
|
||
<h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${mapData.companyName[lang]}</h4>
|
||
<p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
|
||
<strong>${mapData.contactInfo[lang].address}:</strong>${mapData.address[lang]}
|
||
</p>
|
||
|
||
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
||
<strong>${mapData.contactInfo[lang].email}:</strong>zmz@yxsilicon.com
|
||
</p>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 更新地图信息
|
||
function updateMapInfo(lang) {
|
||
if (marker && infoWindow) {
|
||
// 更新标记标题
|
||
marker.setTitle(mapData.companyName[lang]);
|
||
|
||
// 更新信息窗体内容
|
||
infoWindow.setContent(createInfoWindowContent(lang));
|
||
|
||
// 如果信息窗体是打开状态,重新打开以更新内容
|
||
if (infoWindow.getIsOpen()) {
|
||
infoWindow.open(map, marker.getPosition());
|
||
}
|
||
}
|
||
}
|
||
|
||
// 初始化地图
|
||
function initAMap() {
|
||
try {
|
||
// 获取当前语言
|
||
const currentLang = window.currentLang || localStorage.getItem('siteLang') || "zh";
|
||
|
||
// 先加载所需插件
|
||
AMap.plugin(['AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], function() {
|
||
const geocoder = new AMap.Geocoder({
|
||
city: "深圳",
|
||
radius: 1000
|
||
});
|
||
|
||
geocoder.getLocation(mapData.address.zh, function(status, result) {
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
const lnglat = result.geocodes[0].location;
|
||
|
||
// 创建地图实例
|
||
map = new AMap.Map('mapContainer', {
|
||
zoom: 16,
|
||
center: [lnglat.lng, lnglat.lat],
|
||
viewMode: '3D',
|
||
resizeEnable: true,
|
||
pitch: 40,
|
||
mapStyle: 'amap://styles/normal'
|
||
});
|
||
|
||
// 创建标记
|
||
marker = new AMap.Marker({
|
||
position: [lnglat.lng, lnglat.lat],
|
||
title: mapData.companyName[currentLang],
|
||
animation: 'AMAP_ANIMATION_DROP',
|
||
offset: new AMap.Pixel(-13, -30)
|
||
});
|
||
|
||
map.add(marker);
|
||
|
||
// 创建信息窗体
|
||
infoWindow = new AMap.InfoWindow({
|
||
content: createInfoWindowContent(currentLang),
|
||
offset: new AMap.Pixel(0, -30),
|
||
closeWhenClickMap: true
|
||
});
|
||
|
||
// 地图加载完成后打开信息窗体
|
||
map.on('complete', function() {
|
||
infoWindow.open(map, [lnglat.lng, lnglat.lat]);
|
||
});
|
||
|
||
// 点击标记时打开信息窗体
|
||
marker.on('click', function() {
|
||
infoWindow.open(map, marker.getPosition());
|
||
});
|
||
|
||
// 添加控件
|
||
map.addControl(new AMap.ToolBar({
|
||
position: 'RB'
|
||
}));
|
||
|
||
map.addControl(new AMap.Scale());
|
||
|
||
// 确保标记点居中显示
|
||
map.setFitView([marker]);
|
||
|
||
// 响应式处理
|
||
window.addEventListener('resize', function() {
|
||
map.resize();
|
||
map.setCenter([lnglat.lng, lnglat.lat]);
|
||
});
|
||
} else {
|
||
console.error('地址解析失败:', result);
|
||
const mapContainer = document.getElementById('mapContainer');
|
||
if (mapContainer) {
|
||
mapContainer.innerHTML =
|
||
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败,请刷新重试</div>';
|
||
}
|
||
}
|
||
});
|
||
});
|
||
} catch (error) {
|
||
console.error('地图初始化失败:', error);
|
||
const mapContainer = document.getElementById('mapContainer');
|
||
if (mapContainer) {
|
||
mapContainer.innerHTML =
|
||
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败,请刷新重试</div>';
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 在文件末尾添加
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 确保地图容器存在
|
||
const mapContainer = document.getElementById('mapContainer');
|
||
if (mapContainer) {
|
||
// 初始化地图
|
||
initAMap();
|
||
} else {
|
||
console.error('地图容器不存在');
|
||
}
|
||
if (window.location.hash === '#address-li') {
|
||
const addressLi = document.getElementById('address-li');
|
||
if (addressLi) {
|
||
addressLi.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
|
||
}
|
||
}
|
||
|
||
|
||
}); |