101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
|
const branchData = {
|
|||
|
|
name: '上海浦发银行合肥黄山路支行',
|
|||
|
|
position: { lat: 31.842213, lng: 117.272497 },
|
|||
|
|
address: '合肥市包河区黄山路230号',
|
|||
|
|
phone: '0551-63616784',
|
|||
|
|
hours: '工作日: 9:00-12:00 14:00-18: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/SPDB-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;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|