所有项目提交
This commit is contained in:
120
驭鑫/yxsilicon/js/contactUs.js
Normal file
120
驭鑫/yxsilicon/js/contactUs.js
Normal file
@@ -0,0 +1,120 @@
|
||||
function initAMap() {
|
||||
try {
|
||||
// 更精确的地址
|
||||
const address = '广东省深圳市南山区高新中三道2号软件园一期7栋303室';
|
||||
|
||||
// 创建地图实例 - 延迟创建,等待地址解析
|
||||
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: 17, // 放大缩放级别以聚焦位置
|
||||
center: [lnglat.lng, lnglat.lat], // 直接设置中心点
|
||||
viewMode: '3D', // 使用3D视图更生动
|
||||
resizeEnable: true, // 监控地图容器尺寸变化
|
||||
pitch: 30, // 俯视角度
|
||||
mapStyle: 'amap://styles/normal' // 使用标准彩色地图
|
||||
});
|
||||
|
||||
// 添加标记
|
||||
const marker = new AMap.Marker({
|
||||
position: [lnglat.lng, lnglat.lat],
|
||||
title: '深圳驭鑫科技有限公司',
|
||||
animation: 'AMAP_ANIMATION_DROP',
|
||||
offset: new AMap.Pixel(-13, -30)
|
||||
});
|
||||
|
||||
// 将标记添加到地图
|
||||
map.add(marker);
|
||||
|
||||
// 创建信息窗体内容
|
||||
const content = `
|
||||
<div class="info-content">
|
||||
<div class="info-title">深圳驭鑫科技有限公司</div>
|
||||
<div class="info-address">${address}</div>
|
||||
</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>';
|
||||
|
||||
// 地址解析失败时,创建一个默认地图
|
||||
map = new AMap.Map('mapContainer', {
|
||||
zoom: 12,
|
||||
center: [113.953537, 22.533354], // 深圳市中心
|
||||
viewMode: '2D',
|
||||
resizeEnable: true,
|
||||
mapStyle: 'amap://styles/normal'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error);
|
||||
document.getElementById('mapContainer').innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败,请刷新重试</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 当DOM加载完成时,如果AMap已加载则初始化地图
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
});
|
||||
|
||||
// 暴露全局函数供回调使用
|
||||
window.initMap = function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user