微信小程序引入腾讯地图

简介

这篇博客主要记录在使用uni-app开发微信小程序引入腾讯地图时候的一些问题。在后台管理系统中对某一区域进行绘制,将该区域于对应的人员进行绑定.然后在小程序端展示绘制的区域,并将与该区域绑定的人员展示在区域的中心,并绑定点击事件.

安装

开发前提条件是需要先去腾讯地图控制台申请应用,并绑定你的小程序,最后将得倒的 KEY 传入map组件

示例代码

视图部分

<map id="citymap" name="citymap" style="width: 100%;height: 100%;" 		    	:       
	:longitude="longitude" 
	:latitude="latitude" // longitude/latitude 表示地图中心点的经纬度
	:subkey="" // 控制台注册的密钥
	:markers="marker" // 标注的点位 list
	:polygons="polygons" // 绘制的区域 list
    show-location // 显示带有方向的当前定位点
    show-compass // 是否显示指南针
    enable-rotate // 是否支持旋转
	:include-points="includePointsArr" // 缩放视野以包含所有给定的坐标点
    @markertap="markerTap" />

更多属性详见uni-app map 组件描述.

业务逻辑

  import { onMounted, ref, computed } from "vue"
  ...
  // 根据业务需求 地图中心点
  const longitude = ref(102.20416)
  const latitude = ref(24.95051)
  const polygons = ref([])
  // 这是缩告诉 map 你要将哪些点位全部显示在屏幕内,padding 则是距离屏幕边框的距离
  const includePointsArr = ref({padding:[20,20,20,20],points:[]})
  
  ...

绘制区域

// 实际网络请求,后端返回的区域经纬度
  httpGetGardList().then(res => {
    const _polygons:any = []
    let curPoint=[]
    res?.data?.data?.forEach((item : any) => {
    
      // 这是每一块区域的基本数据结构
      const basePolygons = {
        fillColor: '#e0d2d380', // 区域的填充颜色
        strokeColor: '#D30303', // 区域边框颜色
        strokeWidth: 5, // 区域的宽度
        name: '',
        id: 0,
        points: [] // 这是绘制这块儿区域对应的点位
      }
		
	 // 后端返回的字段名对不上 这里先转成字符串 再来个全局替换
      let p = item?.lat_long_obj?.replaceAll('lat', 'latitude').replaceAll('lng', 'longitude')
      
      basePolygons.points = JSON.parse(p)
      basePolygons.id = item.id
      basePolygons.name = item.name
      _polygons.push(basePolygons)
      curPoint=[...curPoint,...basePolygons.points]
    })
    includePointsArr.value.points=curPoint // 需要在屏幕内显示完全的点位
    polygons.value = _polygons // 绘制区域
  })

区域中心描点

这是一个工具方法用来计算你绘制区域的大致中心点

/**
* @param {Object} pointObj
* @param {Array} pointObj.longitude
* @param {Array} pointObj.latitude
* @returns [] 中心点
*/
  function getCenter(pointObj) {
    //console.log(JSON.stringify(pointArray));
    let sortedLongitudeArray = pointObj.longitude.sort();//首先对经度进行排序，红色部分是array中经度的名称
    let sortedLatitudeArray = pointObj.latitude.sort();//对纬度进行排序，红色部分是array中纬度的名称
    let centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(4);
    let centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(4);
    return [centerLongitude, centerLatitude];
  }

下面这一部分是计算在地图上所要标记的点位

const marker = computed(() => {
    let _maker = []
    let _includePoints = []
    
    // 遍历绘制区域的点位
    polygons.value.forEach((item : any, index : number) => {
    
    // 点位的基础数据结构
      const baseMake = {
        id: 0, // 点位的ID 
        callout: {
          content: '点位名称,用于展示',
          color: "点位名称显示的颜色",
          padding: '内边距离',
          borderRadius: 8,// 圆角
          bgColor: 'red',// 背景颜色
          display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
          textAlign: 'center'// 文字局中
        },
        latitude: 0,
        longitude: 0, // 当前点位的经纬坐标
        iconPath: default_head // 点位展示的图标 默认是一个定位图标
      }
		
     // 用来构造数据 目的是去求当前区域的中心点位
      let latitudes = []
      let longitudes = []
      
      item.points?.forEach((e : any) => {
        latitudes.push(e?.latitude)
        longitudes.push(e?.longitude)
      })
      const data = getCenter({ 'longitude': longitudes, 'latitude': latitudes })
      baseMake.callout.content = item.name
      baseMake.id = item.id
      baseMake.latitude = parseFloat(data[1])
      baseMake.longitude = parseFloat(data[0])
      _maker.push(baseMake)
    })
    return _maker
  })

绑定点击事件

  const markerTap = (val) => {
  // 这里就能拿到你点位上的name 和 ID 
    console.log("点击的网格", val)
  }

效果图

这里由于数据的问题导致绘制的区域重叠