114 lines
4.6 KiB
JavaScript
114 lines
4.6 KiB
JavaScript
|
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();
|
|||
|
|
}
|
|||
|
|
};
|