汉晶删除3个产品案例、添加地图组件
This commit is contained in:
parent
461fed6bd6
commit
d64ed43221
|
|
@ -62,7 +62,7 @@
|
||||||
|
|
||||||
.banner{
|
.banner{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 314vh;
|
height: 400vh;
|
||||||
background-image: url(../imgs/svg/背景纹（大）.svg);
|
background-image: url(../imgs/svg/背景纹（大）.svg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size:160%;
|
background-size:160%;
|
||||||
|
|
@ -223,4 +223,34 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0vh;
|
top: 0vh;
|
||||||
left: 20vw;
|
left: 20vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --------------- */
|
||||||
|
.map{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
/* background: palegoldenrod; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBox-bottom{
|
||||||
|
width: 55vw;
|
||||||
|
height: 55vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 10vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#mapContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 300px; /* 确保地图有最小高度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,13 @@
|
||||||
<link rel="stylesheet" href="../css/base.css">
|
<link rel="stylesheet" href="../css/base.css">
|
||||||
<link rel="stylesheet" href="../css/footer.css">
|
<link rel="stylesheet" href="../css/footer.css">
|
||||||
<link rel="stylesheet" href="../css/header.css">
|
<link rel="stylesheet" href="../css/header.css">
|
||||||
|
<script>
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: 'd7d163684cbe3ea85f182a42cd1b8880',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="https://webapi.amap.com/maps?v=2.0&key=d8d0391f0356497ccdc1c0f13d4a8c33&callback=initMap"></script>
|
||||||
|
<script src="../js/aboutUs.js"></script>
|
||||||
<title>深圳汉晶电子信息有限公司</title>
|
<title>深圳汉晶电子信息有限公司</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -108,8 +115,26 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="map">
|
||||||
|
|
||||||
|
<div class="addressBox-bottom">
|
||||||
|
<div id="mapContainer"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<footer class="footer" style=" background-color: #020A4C !important; ">
|
<footer class="footer" style=" background-color: #020A4C !important; ">
|
||||||
<section class="emailBox">
|
<section class="emailBox">
|
||||||
<div class="emailLeft">
|
<div class="emailLeft">
|
||||||
|
|
|
||||||
|
|
@ -89,22 +89,22 @@
|
||||||
<img src="../imgs/products/XYV2.png" alt="KS6PRO运算加速芯片">
|
<img src="../imgs/products/XYV2.png" alt="KS6PRO运算加速芯片">
|
||||||
<p>XYV2 红外图像处理芯片</p>
|
<p>XYV2 红外图像处理芯片</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-item" data-product="NAVT1">
|
<!-- <div class="product-item" data-product="NAVT1">
|
||||||
<img src="../imgs/products/NAVT1.png" alt="KS6PRO运算加速芯片">
|
<img src="../imgs/products/NAVT1.png" alt="KS6PRO运算加速芯片">
|
||||||
<p>NAVT1 自动驾驶视觉处理芯片</p>
|
<p>NAVT1 自动驾驶视觉处理芯片</p>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="product-item" data-product="BIOX1">
|
<!-- <div class="product-item" data-product="BIOX1">
|
||||||
<img src="../imgs/products/BIOX1.png" alt="KS6PRO运算加速芯片">
|
<img src="../imgs/products/BIOX1.png" alt="KS6PRO运算加速芯片">
|
||||||
<p>BIOX1 指纹识别芯片</p>
|
<p>BIOX1 指纹识别芯片</p>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="product-item" data-product="SND32">
|
<div class="product-item" data-product="SND32">
|
||||||
<img src="../imgs/products/SND32.png" alt="KS6PRO运算加速芯片">
|
<img src="../imgs/products/SND32.png" alt="KS6PRO运算加速芯片">
|
||||||
<p>SND32 高保真音频处理芯片</p>
|
<p>SND32 高保真音频处理芯片</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-item" data-product="WIFI6-UC">
|
<!-- <div class="product-item" data-product="WIFI6-UC">
|
||||||
<img src="../imgs/products/WIFI6-UC.png" alt="KS6PRO运算加速芯片">
|
<img src="../imgs/products/WIFI6-UC.png" alt="KS6PRO运算加速芯片">
|
||||||
<p>WIFI6-UC 通信协议芯片</p>
|
<p>WIFI6-UC 通信协议芯片</p>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="product-item" data-product="AGRO1">
|
<div class="product-item" data-product="AGRO1">
|
||||||
<img src="../imgs/products/AGRO1.png" alt="KS6PRO运算加速芯片">
|
<img src="../imgs/products/AGRO1.png" alt="KS6PRO运算加速芯片">
|
||||||
<p>AGRO1 农业环境监测芯片</p>
|
<p>AGRO1 农业环境监测芯片</p>
|
||||||
|
|
@ -226,34 +226,34 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-content" id="NAVT1" style="display: none;">
|
<!-- <div class="detail-content" id="NAVT1" style="display: none;">
|
||||||
<div class="detail-image">
|
<div class="detail-image">
|
||||||
<img src="../imgs/products/NAVT1.png" alt="NAVT1">
|
<img src="../imgs/products/NAVT1.png" alt="NAVT1">
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-info">
|
<div class="detail-info">
|
||||||
<h2>NAVT1 自动驾驶视觉处理芯片</h2>
|
<h2>NAVT1 自动驾驶视觉处理芯片</h2>
|
||||||
<div class="info-list">
|
<div class="info-list">
|
||||||
<!-- <p>客户需求：自动识别障碍物与车道线，适配自动驾驶系统。</p> -->
|
|
||||||
<p>解决方案：内置神经网络引擎、图像识别模块，支持 CAN 通信。</p>
|
<p>解决方案：内置神经网络引擎、图像识别模块，支持 CAN 通信。</p>
|
||||||
<p>技术亮点：支持 YOLOv5，识别延迟低，集成 IMU 实现高精度导航。</p>
|
<p>技术亮点：支持 YOLOv5，识别延迟低，集成 IMU 实现高精度导航。</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="detail-content" id="BIOX1" style="display: none;">
|
<!-- <div class="detail-content" id="BIOX1" style="display: none;">
|
||||||
<div class="detail-image">
|
<div class="detail-image">
|
||||||
<img src="../imgs/products/BIOX1.png" alt="BIOX1">
|
<img src="../imgs/products/BIOX1.png" alt="BIOX1">
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-info">
|
<div class="detail-info">
|
||||||
<h2>BIOX1 指纹识别芯片</h2>
|
<h2>BIOX1 指纹识别芯片</h2>
|
||||||
<div class="info-list">
|
<div class="info-list">
|
||||||
<!-- <p>客户需求：智能门锁中实现快速安全的指纹识别。</p> -->
|
|
||||||
<p>解决方案：内置光学传感器接口与指纹模板引擎，支持超低功耗待机。</p>
|
<p>解决方案：内置光学传感器接口与指纹模板引擎，支持超低功耗待机。</p>
|
||||||
<p>技术亮点：活体检测支持，0.3s 识别时间，极低误识率。</p>
|
<p>技术亮点：活体检测支持，0.3s 识别时间，极低误识率。</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="detail-content" id="SND32" style="display: none;">
|
<div class="detail-content" id="SND32" style="display: none;">
|
||||||
<div class="detail-image">
|
<div class="detail-image">
|
||||||
<img src="../imgs/products/SND32.png" alt="SND32">
|
<img src="../imgs/products/SND32.png" alt="SND32">
|
||||||
|
|
@ -268,20 +268,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-content" id="WIFI6-UC" style="display: none;">
|
<!-- <div class="detail-content" id="WIFI6-UC" style="display: none;">
|
||||||
<div class="detail-image">
|
<div class="detail-image">
|
||||||
<img src="../imgs/products/WIFI6-UC.png" alt="WIFI6-UC">
|
<img src="../imgs/products/WIFI6-UC.png" alt="WIFI6-UC">
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-info">
|
<div class="detail-info">
|
||||||
<h2>WIFI6-UC 通信协议芯片</h2>
|
<h2>WIFI6-UC 通信协议芯片</h2>
|
||||||
<div class="info-list">
|
<div class="info-list">
|
||||||
<!-- <p>客户需求：升级路由器至 Wi-Fi 6 并支持多设备高速连接。</p> -->
|
|
||||||
<p>解决方案：实现 OFDMA、MU-MIMO 与 BSS Coloring，优化多终端通信。</p>
|
<p>解决方案：实现 OFDMA、MU-MIMO 与 BSS Coloring，优化多终端通信。</p>
|
||||||
<p>技术亮点：支持双频并发，吞吐率达 9.6Gbps，节能设计优秀。</p>
|
<p>技术亮点：支持双频并发，吞吐率达 9.6Gbps，节能设计优秀。</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="detail-content" id="AGRO1" style="display: none;">
|
<div class="detail-content" id="AGRO1" style="display: none;">
|
||||||
<div class="detail-image">
|
<div class="detail-image">
|
||||||
<img src="../imgs/products/AGRO1.png" alt="AGRO1">
|
<img src="../imgs/products/AGRO1.png" alt="AGRO1">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
function initAMap() {
|
||||||
|
try {
|
||||||
|
// 更新为完整地址
|
||||||
|
const address = '广东省深圳市南山区粤海街道麻岭社区麻雀岭工业区M-6栋中钢大厦5A010';
|
||||||
|
const companyName = '深圳汉晶电子信息有限公司';
|
||||||
|
|
||||||
|
// 创建地图实例
|
||||||
|
let map = null;
|
||||||
|
|
||||||
|
// 地址解析
|
||||||
|
AMap.plugin('AMap.Geocoder', function() {
|
||||||
|
const geocoder = new AMap.Geocoder({
|
||||||
|
city: "深圳",
|
||||||
|
radius: 1000
|
||||||
|
});
|
||||||
|
|
||||||
|
geocoder.getLocation(address, 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'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新标记信息
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: [lnglat.lng, lnglat.lat],
|
||||||
|
title: companyName,
|
||||||
|
animation: 'AMAP_ANIMATION_DROP',
|
||||||
|
offset: new AMap.Pixel(-13, -30)
|
||||||
|
});
|
||||||
|
|
||||||
|
map.add(marker);
|
||||||
|
|
||||||
|
// 更新信息窗体内容
|
||||||
|
const content = `
|
||||||
|
<div class="info-content" style="padding: 15px;">
|
||||||
|
<h4 style="margin: 0 0 10px 0; color: #100B4E; font-size: 16px;">${companyName}</h4>
|
||||||
|
<p style="margin: 0 0 8px 0; font-size: 13px;color: #100B4E;">
|
||||||
|
<strong>地址：</strong>${address}
|
||||||
|
</p>
|
||||||
|
<p style="margin: 0 0 8px 0; font-size: 13px; color: #100B4E;">
|
||||||
|
<strong>电话：</strong>13420976989
|
||||||
|
</p>
|
||||||
|
<p style="margin: 0; font-size: 13px; color: #100B4E;">
|
||||||
|
<strong>Email：</strong>fu.bin@hjsilicon.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 创建信息窗体
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content: content,
|
||||||
|
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);
|
||||||
|
document.getElementById('mapContainer').innerHTML =
|
||||||
|
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('地图初始化失败:', error);
|
||||||
|
document.getElementById('mapContainer').innerHTML =
|
||||||
|
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DOM加载完成时初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
if (typeof AMap !== 'undefined') {
|
||||||
|
initAMap();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 回调函数
|
||||||
|
window.initMap = function() {
|
||||||
|
if (typeof AMap !== 'undefined') {
|
||||||
|
initAMap();
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue