微信小程序引入腾讯地图

简介

这篇博客主要记录在使用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,