高德地图的多个标注点以及标注文字,标注点的点击

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);
  })

}

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值