全网react+飞冰（ice）UI框架组件实例（10）腾讯地图运用

在项目开发中要用到地图功能，突然发现自己在地图方法的运用比较少，基本上没有这方法的经验，我只在小程序中用到地图，web端是没有后面同事跟我说之前有项目做地图开发，让我看一下之前的项目地图是怎么用的，看了之前的项目之后，对地图这块功能也是半懂不懂的，只能看地图的api文档，最终还是把这个功能完成了

这次一共完成跟地图有关的三个功能，第一功能就是在地图显示全部设备的标记点，第二个功能就是点击点显示对应的设备信息，第三个功能点，在地图上添加设备标记，

地图上添加设备标记

首先安装插件

npm install --save tmap
复制代码

看腾讯地图官网

https://lbs.qq.com/webApi/javascriptGL/glDemo
复制代码

通过经纬度获取地址

这块要重点说一下，因为腾讯地图是没有直接获取到地址，是要通过腾讯地图的一个api接口，通过经纬度和key值来获取地址，

key值是要注册帐号，创建一个应用，就会有一个key值
本地开发的时候在请求获取地址的api需要开一下本地代理，不然会出现跨域问题

获取地图标记地址代理代码

"proxy": {
    "/ws": {
      "enable": true,
      "target": "https://apis.map.qq.com"
    }
  },
复制代码

实例代码部分

import TMap from 'TMap'

//创建地图方法 
const initMap = (data) =>{
    console.log('data',data)
    var center = new TMap.LatLng(23.12546, 113.358089);//设置中心点坐标

    const map = new TMap.Map(document.getElementById('tmap'), {
      center: center,//设置地图中心点坐标
      // zoom: 17.2,   //设置地图缩放级别
      // pitch: 43.5,  //设置俯仰角
      // rotation: 45    //设置地图旋转角度
    })

    window.map = map
    let geometries = []
    if(data && data.id) {
      geometries.push({
        id: data.id,
        position: new TMap.LatLng(data.lat, data.lng),
        properties: data
      })
    }
    console.log('geometries', geometries)
    // 修改标记样式
    var markerLayer = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          "myStyle": new TMap.MarkerStyle({ 
            "width": 22,  // 点标记样式宽度（像素）
            "height": 32, // 点标记样式高度（像素）
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 11, y: 32 }  
        }) 
      },
    });
    if(data && data.id) {
      markerLayer.add({
        "styleId": 'myStyle',  //指定样式id
        position: geometries[0].position
      }); 
    }
    // 添加标记  
    map.on('click', e => {
      console.log('e', e.latLng)
      markerLayer.setGeometries([])
      markerLayer.add({
        "styleId": 'myStyle',  //指定样式id
        position: e.latLng
      });  
      getAddress(e.latLng)
        
        
    })
  }
 
 // 
 // 通过经纬度获取地址方法
  const getAddress = (data)=>{
    axios.get(`/ws/geocoder/v1/?location=${data.lat},${data.lng}&key=RLPBZ-WLHWK-UWSJX-AS7K7-NYHPO-NDBOZ`)
    .then(function (response) {
      setLoading(false);
      console.log('地址', response.data.result)
      let res = response.data.result
      let obj = {
        lat: res.location.lat,
        lng: res.location.lng,
        address: res.address
      }
      setaddunitsList(obj)
    })
    .catch(function (error) {
      common.NoticeError('地址数据获取', '地址数据获取失败', error)
      setLoading(false);
    })

  }
// html部分
 <div id="tmap" className={styles.tmapCon}></div>
复制代码

地图显示全部设备的标记点，点击点显示对应的设备信息

initMap(list) {
    const map = new TMap.Map(document.getElementById('tmap'), {
      // center: center,//设置地图中心点坐标
      // zoom: 17.2,   //设置地图缩放级别
      // pitch: 43.5,  //设置俯仰角
      // rotation: 45    //设置地图旋转角度
    })

    window.map = map

    let geometries = []
    let sw_lat, sw_lng, ne_lat, ne_lng
    
    list.forEach((row, index) => {
      row.lat = row.lat? row.lat: 23.11639
      row.lng = row.lng? row.lng: 113.304434
      
      geometries.push({
        id: row.id,
        styleId: 'label',
        position: new TMap.LatLng(row.lat, row.lng),
        content: row.name,
        properties: row
      })
      console.log('geometries', geometries)
      if (index > 0) {
        if (sw_lat > row.lat) {
          sw_lat = row.lat
        }

        if (sw_lng > row.lng) {
          sw_lng = row.lng
        }

        if (ne_lat < row.lat) {
          ne_lat = row.lat
        }

        if (ne_lng < row.lng) {
          ne_lng = row.lng
        }
      } else {
        sw_lat = row.lat
        sw_lng = row.lng
        ne_lat = row.lat
        ne_lng = row.lng
      }
    })

    // 
    var label = new TMap.MultiLabel({
      id: 'label-layer',
      map: window.map,
      styles: {
          'label': new TMap.LabelStyle({
              'color': '#3777FF', //颜色属性
              'size': 16, //文字大小属性
              'offset': { x: -8, y: 0 }, //文字偏移属性单位为像素
              'angle': 0, //文字旋转属性
              'alignment': 'center', //文字水平对齐属性
              'verticalAlignment': 'middle' //文字垂直对齐属性
          })
      },
      geometries: geometries
  });
// 创建点聚合对象
const markerCluster = new TMap.MarkerCluster({
  id: 'cluster',
  map: window.map,
  enableDefaultStyle: true,
  minimumClusterSize: 2,
  geometries: geometries,
  zoomOnClick: true,
  gridSize: 60,
  averageCenter: false,
  maxZoom: true
})
    // 计算LatLngBounds并设置显示范围
    window.map.fitBounds(new TMap.LatLngBounds(
      new TMap.LatLng(sw_lat - 0.03, sw_lng - 0.03),
      new TMap.LatLng(ne_lat + 0.03, ne_lng + 0.03)
    ))
    // 当前地图视口图片瓦片加载完时触发,关闭loading
    map.on('tilesloaded', () => {
      this.setState({
        loading: false
      })
    })
    // 点击地图图标显示弹窗
    markerCluster.on('click', e => {
      console.log('e', e)

      if (e.geometry) {
        map.setCenter(e.geometry.position)
        this.setState({
          title: '设备明细',
          dtype: 'detail',
          listdetail: false,
          detailloading: true,
          visible: true
        })
        this.getDetail(e.geometry.id)
      } else {

        console.log(123, e.cluster.geometries)
        let arr = []
        arr.push(e.cluster.geometries[0].properties)

      }
    })

    this.setState({
      map
    })
  }
复制代码