function initMap() {
(window as any)._AMapSecurityConfig = {
securityJsCode: 'a9a1f21974b4eb949d39b413685bcd4b',
}
AMapLoader.load({
key: "1481cfb081ee46c1c129a3398137a233", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
// plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
const map = new AMap.Map("container", { //设置地图容器id
viewMode: "2D", //是否为3D地图模式
zoom: 14, //初始化地图级别
center: current_position.value, //初始化地图中心点位置
cursor: 'pointer',
clickable: true
});
// 添加插件
AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"],
function () {
map.addControl(new AMap.MapType({
position: 'RB', //定位到左下角
offset: [10, 180]
})); // 实现默认图层与卫星图,实时交通图层之间切换
map.addControl(new AMap.Geolocation({
position: 'RB', //定位到左下角
offset: [15, 200]
})); // 定位当前位置
});
// 实例化点标记
const icons = new AMap.Icon({
size: new AMap.Size(22, 33), // 图标尺寸
image: poi, // Icon的图像
imageSize: new AMap.Size(22, 33),
});
Result.forEach((item: { lnglats: any[]; name: any; }, value: any) => {
const marker = new AMap.Marker({
icon: icons,//添加icon实例
position: new AMap.LngLat(item.lnglats[0], item.lnglats[1]),
offset: new AMap.Pixel(-10, 50),
title: item.name,
zoom: 13
});//地图标记点
var text = new AMap.Text({
text: item.name,
anchor: 'top-center', // 设置文本标记锚点
draggable: true,
offset: new AMap.Pixel(0, 20),
style: {
'padding': '4px 20px',
'border-radius': '30px',
'background-color': '#C6DCE3',
'border-width': 0,
'text-align': 'center',
'font-size': '11px',
'color': 'black',
},
position: [item.lnglats[0], item.lnglats[1]]
});//地图文本标注
text.setMap(map);
map.add(marker);
marker.on('click',function(item: any){ //点击前往相应站点的实时数据页面
DataStore.MarkerArr.forEach((val:any)=>{
if(val.Name==item.target._originOpts.title){
DataStore.keysItem=val;
router.push("/realtime")
}
})
})
})
}).catch(e => {
console.log(e);
})
}