腾讯地图JavaScript API GL简单使用

xianghong_yang

已于 2022-02-10 16:50:17 修改

阅读量2.3k

点赞数 4

文章标签： javascript angular 前端

于 2022-02-10 16:49:42 首次发布

本文链接：https://blog.csdn.net/weixin_44761091/article/details/122864375

版权

本文详细记录了在Angular项目中集成腾讯3D地图JavaScript API GL的过程，包括地图初始化、设置3D视角、绘制多边形、添加标记及信息窗口的操作。通过实例代码展示了如何创建地图、添加多边形图层、设置标记样式以及实现信息窗口的动态显示和隐藏功能。

摘要由CSDN通过智能技术生成

今天来记录一下腾讯3D地图JavaScript API GL使用过程。

背景：基于angular项目，使用腾讯地图。

引入,需要在index.html引入地图

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

初始化地图，在组件中使用地图需要声名

//声名
  declare var TMap: any;
  //全局变量
  maps;
centers；
  volunteermarker;
//初始化地图
  this.centers = new TMap.LatLng(39.92223333333333, 116.15266666666666);
  this.maps = new TMap.Map('tmap', {
        center: this.centers,
        mapStyleId: 'style1',
        zoom: 17,
  });
   //要展示3D效果  必须设置视角
  this.maps.setViewMode('3D');
  this.maps.setPitch(45);

添加多边形

let polygonPath = [
       new TMap.LatLng(39.9214, 116.151),
       new TMap.LatLng(39.9214, 116.151),
       new TMap.LatLng(39.9215, 116.156),
       new TMap.LatLng(39.9239, 116.156),
       new TMap.LatLng(39.9238, 116.151),
       new TMap.LatLng(39.9214, 116.151),
     ]
//踩坑！！！这个变量名字必须是map!!!!否则无效 
 let map =this.maps;
   var polygon = new TMap.MultiPolygon({
     map, // 显示多边形图层的底图
     styles: { // 多边形的相关样式
       'polygon': new TMap.PolygonStyle({
         'color': 'rgba(41,91,255,0.1)', // 面填充色
         'showBorder': true, // 是否显示拔起面的边线
         'borderColor': 'rgba(41,91,255,1)', // 边线颜色
         'borderWidth': 1, // 边线宽度
         'borderDashArray': [5, 5] // 虚线数组
       }),
     },
     geometries: [{
       id: 'polygon', // 多边形图形数据的标志信息
       styleId: 'polygon', // 样式id
       paths: polygonPath, // 多边形的位置信息
     }],
   });

添加标记和信息窗口

drawVolunteerIcon() {
    let mp=null;
    let infoWindow = new TMap.InfoWindow({
      map: this.maps,
      position: new TMap.LatLng(39.984104, 116.307503),
      offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
    });
    infoWindow.close();
    let geometries=[];
    if( this.volunteermarker) {
       //删除标记 
      this.removeVolunteerMarker();
    }
    for(let item of this.volunteerData) {
      mp = new TMap.LatLng(item.latitude, item.longitude);
      if(item.isactive===1) {
        geometries.push({
          //id可以用于删除某个指定标记
          "id":item.volunteerId,
            //styleId：用于选择多标记样式
          "styleId": 'marker2',
          "position": mp,
            //properties属性中的值可以读取作为信息窗口的内容
          "properties": {
          "title":'<div><div>志愿者姓名：'
                    + item.volunteerName+'</div><dv> 联 系 电 话：'+item.volunteerPhone + '</div><div> 常 驻 区 域：' + item.address + '</div></div>'
        }
        })
      } else {
        geometries.push({
          "id":item.volunteerId,
          "styleId": 'marker1',
          "position": mp,
          "properties": {
            "title":'<div><div>志愿者姓名：'
                      + item.volunteerName+'</div><dv> 联 系 电 话：'+item.volunteerPhone + '</div><div> 常 驻 区 域：' + item.address + '</div></div>'
          }
        })
      }
    }
    
    this.volunteermarker = new TMap.MultiMarker({
      map: this.maps,
      styles: {
          "marker1": new TMap.MarkerStyle({
              "width": 18,
              "height": 35,
              "anchor": { x: 16, y: 32 },
              "src": 'assets/images/volunteer-1.png',
          }),
          "marker2": new TMap.MarkerStyle({
            "width": 25,
            "height": 35,
            "anchor": { x: 16, y: 32 },
            "src": 'assets/images/volunteer1.png'
        })
      },
      geometries: geometries
    });
     //鼠标移入显示信息窗口
    this.volunteermarker.on('mouseover', (evt) => {
      infoWindow.close();//初始关闭信息窗关闭  infoWindow.open(); //打开信息窗
      infoWindow.open(); //打开信息窗
      infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
      infoWindow.setContent(
        evt.geometry.properties.title
      );//设置信息窗内容
    });
  //鼠标移出隐藏信息窗口   
    this.volunteermarker.on( 'mouseout', () => {
      setTimeout(() => {
        infoWindow.close();
      }, 1000);
    });
  }

//清除ICON
removeVolunteerMarker() {
  for(let item of this.volunteerData) this.volunteermarker.remove(item.volunteerId);
}