您好,欢迎来到叨叨游戏网。
搜索
您的当前位置:首页高德地图的多个标注点以及标注文字,标注点的点击

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

来源:叨叨游戏网
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);
  })

}

 

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- gamedaodao.net 版权所有 湘ICP备2024080961号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务