101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
const branchData = {
|
||
name: '光大银行合肥分行',
|
||
position: { lat: 31.85564, lng: 117.257459 },
|
||
address: '合肥市蜀山区长江西路200号置地广场一楼最东面合易登服务点',
|
||
phone: '0551-65102058',
|
||
hours: '工作日: 9:00-12:00 14:00-17:00'
|
||
};
|
||
|
||
// 初始化地图
|
||
const map = new TMap.Map("map-container", {
|
||
center: new TMap.LatLng(branchData.position.lat, branchData.position.lng),
|
||
zoom: 17,
|
||
mapStyleId: 'style1',
|
||
});
|
||
|
||
// 添加 Marker
|
||
const markerLayer = new TMap.MultiMarker({
|
||
map: map,
|
||
styles: {
|
||
marker: new TMap.MarkerStyle({
|
||
width: 40,
|
||
height: 40,
|
||
anchor: { x: 20, y: 20 },
|
||
src: "./img/Bank-marker.webp"
|
||
})
|
||
},
|
||
geometries: [{
|
||
id: "marker1",
|
||
styleId: "marker",
|
||
position: new TMap.LatLng(branchData.position.lat, branchData.position.lng),
|
||
properties: {
|
||
title: branchData.name
|
||
}
|
||
}]
|
||
});
|
||
|
||
// 控件
|
||
const branchInfo = document.getElementById('branch-info');
|
||
const branchName = document.getElementById('branch-name');
|
||
const branchAddress = document.getElementById('branch-address');
|
||
const branchPhone = document.getElementById('branch-phone');
|
||
const branchHours = document.getElementById('branch-hours');
|
||
const navigateBtn = document.getElementById('navigate-btn');
|
||
const closeBtn = document.getElementById('close-btn');
|
||
|
||
// 显示信息卡
|
||
function showBranchInfo() {
|
||
branchName.textContent = branchData.name;
|
||
branchAddress.textContent = `${branchData.address}`;
|
||
branchPhone.innerHTML = branchData.phone
|
||
.split(',')
|
||
.map(num => `<a href="tel:${num.trim()}">${num.trim()}</a>`)
|
||
.join('，');
|
||
|
||
branchHours.textContent = `${branchData.hours}`;
|
||
branchInfo.classList.remove('hidden');
|
||
setTimeout(() => {
|
||
branchInfo.classList.add('active');
|
||
}, 10);
|
||
}
|
||
|
||
// Marker 点击
|
||
markerLayer.on("click", showBranchInfo);
|
||
|
||
// 页面加载显示卡片
|
||
showBranchInfo();
|
||
|
||
// 微信导航跳转逻辑
|
||
navigateBtn.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const isInWeChat = typeof wx !== 'undefined' && wx.openLocation;
|
||
|
||
if (isInWeChat) {
|
||
// 微信环境：用 JS-SDK 打开导航
|
||
wx.ready(function () {
|
||
wx.openLocation({
|
||
latitude: branchData.position.lat,
|
||
longitude: branchData.position.lng,
|
||
name: branchData.name,
|
||
address: branchData.address,
|
||
scale: 17
|
||
});
|
||
});
|
||
|
||
wx.error(function (err) {
|
||
console.error("微信JS-SDK调用失败：", err);
|
||
alert("微信JS-SDK调用失败，请确认从微信中打开本页");
|
||
});
|
||
} else {
|
||
// 非微信环境：跳转到腾讯地图 POI 详情页
|
||
const keyword = encodeURIComponent(branchData.name);
|
||
const region = encodeURIComponent("合肥");
|
||
const referer = "minsheng.jiutucloud.com"; // 必须备案
|
||
const url = `https://apis.map.qq.com/uri/v1/search?keyword=${keyword}®ion=${region}&referer=${referer}`;
|
||
window.location.href = url;
|
||
}
|
||
});
|
||
|