微信小程序地图Map结合canvas实现手动绘制地图区域

于 2024-07-26 18:56:47 发布
阅读量364 收藏 5
点赞数 7
分类专栏： 前端小程序 文章标签： 微信小程序 小程序 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40791475/article/details/140722323
版权

1. 功能概述

在微信小程序中，用户手动在地图上绘制区域，将绘制的区域边界点转换为经纬度在地图上显示绘制的区域。此功能实现了用户与地图的交互，可以应用于地理围栏、区域标记等场景。

2. 实现步骤

2.1 获取用户位置

在小程序加载时，使用 wx.getLocation 获取用户的当前位置，并设置地图的初始经纬度。

Page({
  data: {
    longitude: 0,
    latitude: 0,
    polygons: [] as Array<{
      points: Array<{ longitude: number; latitude: number }>;
    }>,
    drawing: false,
    canvasPoints: [] as Array<{ x: number; y: number }>,
    screenWidth: 0,
    screenHeight: 0,
    mapScale: 14,
  },

  onLoad() {
    const that = this;
    wx.getLocation({
      type: "gcj02",
      success(res) {
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude,
        });
      },
    });

    const systemInfo = wx.getSystemInfoSync();
    this.setData({
      screenWidth: systemInfo.windowWidth,
      screenHeight: systemInfo.windowHeight,
    });

    wx.startLocationUpdate({
      success() {
        wx.onLocationChange((location) => {
          if (!that.data.drawing) {
            const { longitude, latitude } = location;
            that.setData({ longitude, latitude });
          }
        });
      },
    });
  },

2.2 用户绘制区域

通过在地图上覆盖一层透明的Canvas，用户可以在Canvas上绘制区域。在绘制过程中，记录触摸点的坐标。

  handleCanvasTouchStart() {
    this.setData({ drawing: true, canvasPoints: [] });
  },

  handleCanvasTouchMove(event: any) {
    if (this.data.drawing) {
      const { x, y } = event.touches[0];
      const { canvasPoints } = this.data;
      canvasPoints.push({ x, y });
      this.setData({ canvasPoints });
      this.redrawCanvas();
    }
  },

  handleCanvasTouchEnd() {
    this.setData({ drawing: false });
    this.convertCanvasToLatLng();
  },

  redrawCanvas() {
    const ctx = wx.createCanvasContext("drawCanvas", this);
    const points = this.data.canvasPoints;
    ctx.setFillStyle("rgba(255, 0, 0, 0.3)");
    ctx.beginPath();
    points.forEach((point, index) => {
      if (index === 0) {
        ctx.moveTo(point.x, point.y);
      } else {
        ctx.lineTo(point.x, point.y);
      }
    });
    ctx.closePath();
    ctx.fill();
    ctx.draw();
  },

2.3 将Canvas坐标转换为经纬度

在触摸结束后，将Canvas上的点坐标转换为地图上的经纬度，并将转换后的点添加到地图的 polygon 中。

  convertCanvasToLatLng() {
    const {
      screenWidth,
      screenHeight,
      longitude,
      latitude,
      mapScale,
    } = this.data;
    const mapCtx = wx.createMapContext("map", this);

    const points = this.data.canvasPoints.map((point) => {
      return new Promise<{ longitude: number; latitude: number }>((resolve) => {
        mapCtx.getScale({
          success: (scaleRes) => {
            const mapScale = scaleRes.scale;
            const numberMapper = new NumberMapper();
            const mappedValue = numberMapper.getMappedValue(mapScale);
            mapCtx.getRegion({
              success(region) {
                const lngDelta =
                  region.northeast.longitude - region.southwest.longitude;
                const latDelta =
                  region.northeast.latitude - region.southwest.latitude;
                const lng =
                  longitude +
                  ((point.x - screenWidth / 2) * lngDelta) / screenWidth;
                const lat =
                  latitude -
                  ((point.y - screenHeight / 2) * latDelta) / screenHeight +
                  mappedValue;
                resolve({ longitude: lng, latitude: lat });
              },
            });
          },
        });
      });
    });

    Promise.all(points).then((latLngPoints) => {
      this.setData({
        polygons: [{ points: latLngPoints }],
      });
    });
  },

2.4 清空画布

在绘制结束并转换坐标后，清空画布以准备下一次绘制。

  convertCanvasToLatLng() {
    const { screenWidth, screenHeight, longitude, latitude } = this.data;
    const mapCtx = wx.createMapContext("map", this);

    const points = this.data.canvasPoints.map((point) => {
      return new Promise<{ longitude: number; latitude: number }>((resolve) => {
        mapCtx.getRegion({
          success(region) {
            const lngDelta =
              region.northeast.longitude - region.southwest.longitude;
            const latDelta =
              region.northeast.latitude - region.southwest.latitude;
            const lng =
              longitude +
              ((point.x - screenWidth / 2) * lngDelta) / screenWidth;
            const lat =
              latitude -
              ((point.y - screenHeight / 2) * latDelta) / screenHeight;
            resolve({ longitude: lng, latitude: lat });
          },
        });
      });
    });

    Promise.all(points).then((latLngPoints) => {
      this.setData({
        polygons: [{ points: latLngPoints }],
        canvasPoints: [] // 清空画布点
      });
    });
  },

3. 减小偏移的解决方案

3.1 基于地图缩放值（scale）的修正

在 convertCanvasToLatLng 方法中，使用 mapCtx.getScale 获取当前地图的缩放值，通过自定义的NumberMapper模块对缩放值进行修正，使得不同缩放级别下的偏移量尽可能减小。

class NumberMapper {
  private hashMap: { [key: number]: number } = {
    3: 12.0,
    3.5: 11.0,
    4: 9.7,
    4.5: 6.5,
    5: 4.8,
    5.5: 3,
    6: 2.33,
    6.5: 1.54,
    7: 1.07,
    7.5: 0.76,
    8: 0.445,
    8.5: 0.375,
    9: 0.265,
    9.5: 0.193,
    10: 0.125,
    10.5: 0.102,
    11: 0.062,
    11.5: 0.048,
    12: 0.0316,
    12.5: 0.0241,
    13: 0.0161,
    13.5: 0.011,
    14: 0.00801,
    14.5: 0.0055,
    15: 0.00401,
    15.5: 0.00271,
    16: 0.00195,
    16.5: 0.00138,
    17: 0.001,
    17.5: 0.0007,
    18: 0.0005,
    18.5: 0.00035,
    19: 0.00024,
    19.5: 0.000171,
    20: 0.000121,
  };

  private processNumber(num: number): number {
    const integerPart = Math.floor(num);
    const decimalPart = num - integerPart;
    if (decimalPart === 0) {
      return integerPart;
    } else if (decimalPart > 0 && decimalPart < 0.5) {
      return integerPart + 0.5;
    } else {
      return integerPart + 1;
    }
  }

  public getMappedValue(num: number): number {
    if (num < 3 || num > 20) {
      throw new Error("Number out of range. Must be between 3 and 20.");
    }
    const ratio = getScreenRatio();
    const processedNumber = this.processNumber(num);
    return this.hashMap[processedNumber];
  }
}

const getScreenRatio = (): number => {
  const systemInfo = wx.getSystemInfoSync();
  const screenWidth = systemInfo.windowWidth;
  const screenHeight = systemInfo.windowHeight;
  const aspectRatio = (screenWidth / screenHeight).toFixed(4);
  return parseFloat(aspectRatio);
};

export default getScreenRatio;

3.2 基于不同机型屏幕宽高比的修正

通过 wx.getSystemInfoSync 获取不同机型的屏幕宽高比，创建一个哈希映射表，将不同宽高比映射到对应的修正值。这样可以减小由于不同设备屏幕比例差异带来的偏移问题。

type RatioMap = { [key: string]: number };
const ratioMap: RatioMap = {
  0.4824: 0.0072,
  // 继续添加其他比例和对应的修正值
};
const getScreenRatio = (): number => {
  const systemInfo = wx.getSystemInfoSync();
  const screenWidth = systemInfo.windowWidth;
  const screenHeight = systemInfo.windowHeight;
  const aspectRatio = (screenWidth / screenHeight).toFixed(4);
  return getMappedValue(parseFloat(aspectRatio));
};
const getMappedValue = (ratio: number): number => {
  return ratioMap[ratio] || 0; // 如果找不到对应值，返回0或其他默认值
};

export default getScreenRatio;

4.完整的代码

确保文件目录结构如下

logs/
├── module/
│   ├── numberMapper.ts
│   ├── screenRatio.ts
├── logs.json
├── logs.scss
├── logs.ts
└── logs.wxml

4.1 wxml

<view class="container">
    <map id="map" class="map" enable-scroll="{{false}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location polygons="{{polygons}}">
    </map>
    <canvas style="position:absolute;top:0;left:0;width:100%;height:100%;" canvas-id="drawCanvas" bindtouchstart="handleCanvasTouchStart" bindtouchmove="handleCanvasTouchMove" bindtouchend="handleCanvasTouchEnd"></canvas>
</view>

4.2 scss

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.map {
  width: 100%;
  height: 100vh;
}

4.3 logs.ts

import NumberMapper from "./module/numberMapper";
Page({
  data: {
    longitude: 0,
    latitude: 0,
    polygons: [] as Array<{
      points: Array<{ longitude: number; latitude: number }>;
      strokeWidth: Number;
      strokeColor: string;
      fillColor: string;
    }>,
    drawing: false,
    canvasPoints: [] as Array<{ x: number; y: number }>,
    screenWidth: 0,
    screenHeight: 0,
    mapScale: 14,
  },

  onLoad() {
    const that = this;
    wx.getLocation({
      type: "gcj02",
      success(res) {
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude,
        });
      },
    });

    const systemInfo = wx.getSystemInfoSync();
    this.setData({
      screenWidth: systemInfo.windowWidth,
      screenHeight: systemInfo.windowHeight,
    });

    wx.startLocationUpdate({
      success() {
        wx.onLocationChange((location) => {
          if (!that.data.drawing) {
            const { longitude, latitude } = location;
            that.setData({ longitude, latitude });
          }
        });
      },
    });
  },

  handleCanvasTouchStart() {
    this.setData({ drawing: true, canvasPoints: [] });
  },

  handleCanvasTouchMove(event: any) {
    if (this.data.drawing) {
      const { x, y } = event.touches[0];
      const { canvasPoints } = this.data;
      canvasPoints.push({ x, y });
      this.setData({ canvasPoints });
      this.redrawCanvas();
    }
  },

  handleCanvasTouchEnd() {
    // this.setData({ drawing: false });
    // this.convertCanvasToLatLng();
    this.setData({ drawing: false });
    this.convertCanvasToLatLng().then(() => {
      this.clearCanvas();
    });
  },
  clearCanvas() {
    const ctx = wx.createCanvasContext("drawCanvas", this);
    ctx.clearRect(0, 0, this.data.screenWidth, this.data.screenHeight);
    ctx.draw();
  },

  redrawCanvas() {
    const ctx = wx.createCanvasContext("drawCanvas", this);
    const points = this.data.canvasPoints;
    ctx.setFillStyle("rgba(222, 160, 84, 0.3)");
    ctx.beginPath();
    points.forEach((point, index) => {
      if (index === 0) {
        ctx.moveTo(point.x, point.y);
      } else {
        ctx.lineTo(point.x, point.y);
      }
    });
    ctx.closePath();
    ctx.fill();
    ctx.draw();
  },

  convertCanvasToLatLng() {
    const {
      screenWidth,
      screenHeight,
      longitude,
      latitude,
      mapScale,
    } = this.data;
    const mapCtx = wx.createMapContext("map", this);
    return new Promise<void>((resolve) => {
      const points = this.data.canvasPoints.map((point) => {
        return new Promise<{ longitude: number; latitude: number }>(
          (resolve) => {
            mapCtx.getScale({
              success: (scaleRes) => {
                const mapScale = scaleRes.scale;
                const numberMapper = new NumberMapper();
                const mappedValue = numberMapper.getMappedValue(mapScale);
                console.log(mappedValue, "mappedValue");
                mapCtx.getRegion({
                  success(region) {
                    const lngDelta =
                      region.northeast.longitude - region.southwest.longitude;
                    const latDelta =
                      region.northeast.latitude - region.southwest.latitude;
                    const lng =
                      longitude +
                      ((point.x - screenWidth / 2) * lngDelta) / screenWidth;
                    const lat =
                      latitude -
                      ((point.y - screenHeight / 2) * latDelta) / screenHeight +
                      mappedValue;
                    resolve({ longitude: lng, latitude: lat });
                  },
                });
              },
            });
          }
        );
      });

      Promise.all(points).then((latLngPoints) => {
        this.setData({
          polygons: [
            {
              points: latLngPoints,
              strokeWidth: 3,
              strokeColor: "#dea054",
              fillColor: "#dea0544D",
            },
          ],
        });
        resolve();
      });
    });
  },
});

4.4 module/numberMapper.ts

type HashMap = { [key: number]: number };
import getScreenRatio from "./screenRatio";
class NumberMapper {
  private hashMap: HashMap;

  constructor() {
    this.hashMap = {
      3: 12.0,
      3.5: 11.0,
      4: 9.7,
      4.5: 6.5,
      5: 4.8,
      5.5: 3,
      6: 2.33,
      6.5: 1.54,
      7: 1.07,
      7.5: 0.76,
      8: 0.445,
      8.5: 0.375,
      9: 0.265,
      9.5: 0.193,
      10: 0.125,
      10.5: 0.102,
      11: 0.062,
      11.5: 0.048,
      12: 0.0316,
      12.5: 0.0241,
      13: 0.0161,
      13.5: 0.011,
      14: 0.00801,
      14.5: 0.0055,
      15: 0.00401,
      15.5: 0.00271,
      16: 0.00195,
      16.5: 0.00138,
      17: 0.001,
      17.5: 0.0007,
      18: 0.0005,
      18.5: 0.00035,
      19: 0.00024,
      19.5: 0.000171,
      20: 0.000121,
    };
  }

  private processNumber(num: number): number {
    const integerPart = Math.floor(num);
    const decimalPart = num - integerPart;
    if (decimalPart === 0) {
      return integerPart;
    } else if (decimalPart > 0 && decimalPart < 0.5) {
      return integerPart + 0.5;
    } else {
      return integerPart + 1;
    }
  }

  public getMappedValue(num: number): number {
    if (num < 3 || num > 20) {
      throw new Error("Number out of range. Must be between 3 and 20.");
    }
    const ratio = getScreenRatio(); 
    console.log(ratio, "ratioratio");
    const processedNumber = this.processNumber(num);
    return this.hashMap[processedNumber] - ratio;
  }
}

export default NumberMapper;

4.5 module/screenRatio.ts

type RatioMap = { [key: string]: number };
const ratioMap: RatioMap = {
  0.4824: 0.0072,
  // 添加更多映射值
};
const getScreenRatio = (): number => {
  const systemInfo = wx.getSystemInfoSync();
  const screenWidth = systemInfo.windowWidth;
  const screenHeight = systemInfo.windowHeight;
  const aspectRatio = (screenWidth / screenHeight).toFixed(4);
  return getMappedValue(parseFloat(aspectRatio));
};
const getMappedValue = (ratio: number): number => {
  return ratioMap[ratio] || 0; // 如果找不到对应值，返回0或其他默认值
};

export default getScreenRatio;

例如： module/screenRatio.ts

  1. 搭建 Java 开发环境
  2. 掌握 Java 基本语法
  3. 掌握条件语句
  4. 掌握循环语句

4.6 app.json

"requiredPrivateInfos": ["getLocation", "onLocationChange", "startLocationUpdate"],
"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
 },

5.实现原理

•	获取用户位置：使用 wx.getLocation 和 wx.onLocationChange 获取并更新用户当前位置。
•	绘制区域：在地图上覆盖一层透明的 Canvas，用户通过触摸在 Canvas 上绘制区域，记录绘制的点坐标。
•	坐标转换：在触摸结束后，使用 wx.createMapContext 获取当前地图的缩放比例和区域信息，将 Canvas 上的点坐标转换为地图上的经纬度。
•	减少偏移：通过结合地图缩放比例和设备屏幕宽高比，对转换结果进行修正，以减少绘制区域和地图显示区域之间的偏移。
•	画布清空：在坐标转换完成后，清空画布上的点，准备下一次绘制。

6.总结

通过以上实现，成功解决了在微信小程序中用户手动绘制区域并将其显示在地图上的需求。主要步骤包括获取用户位置、绘制区域、进行坐标转换以及减少偏移。这一过程中的关键点在于结合了 map 与 canvas 的特性，实现了用户在地图上绘制区域的功能。

人工智能的苟富贵
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序基于canvas的自定义地图控件，实现瓦片地图等SimpleMap-wx-master.zip
09-25
在给定的压缩包文件“SimpleMap-wx-master.zip”中，包含了一个名为“SimpleMap-wx-master”的项目，该项目专门针对微信小程序设计了一种基于canvas的自定义地图控件，用于实现瓦片地图功能。以下将详细介绍这一技术...
微信小程序-小程序canvas绘制高铁线路图
08-06
开发者可能利用了微信小程序的地图组件（map）结合canvas，实现地图背景和高铁线路图的融合。通过缩放手势识别，调整canvas的绘图比例，保持线路图的清晰度和比例关系。 最后，考虑到微信小程序的运行环境和平台...
微信小程序+Echarts实现中国地图
窝窝头的博客
02-16 9624
一、版本说明 二、下载文件 Echart 官方 Demo 地址，参考这里； Demo 源码参考这里 需要下载地图 json 文件，参考这里 三、
微信小程序使用canvas绘制二维码实现跳转小程序
zhang1509123907的博客
04-15 3485
开始接到这个需求的时候，我查阅文档获取小程序码 | 微信开放文档 发现两种途径 需要后端在服务器上调用接口拿到二维码，因为调用的https://api.weixin.qq.com这个域名是不允许上白名单， 或者是云开发（显然他们不需要云开发） 这时候我跟他们说，前端画不了跳转小程序页面的二维码，要后端巴拉巴拉的。。。结果打脸时刻来了，（这个故事告诉我们，文档要看干净点） 扫普通链接二维码打开小程序 | 微信开放文档 发现可以在后台按照二维码规则部署小程序链接。（千万千万不要随便说：前端做不了，后.
基于微信小程序Map标签及高德地图开源方法实现路径导航
qq_61834461的博客
07-06 4040
微信小程序自带地图map标签，他是基于canvas画图功能进行的地图渲染，同时依赖微信的getlocation获取经纬度，绘制周边地图。地图上可以标点，画线，查看当地地理信息。但是自带的导航功能模块不能对个人开发者公开。 高德地图提供了基于微信小程序map标签的导航功能，只需要将高德文件导入项目，即可获取周边地理信息及导航、天气等信息。返回数据为微信小程序map标签的markers和linear对象形式，只需要稍加修饰，便可实现类似于官方导航的功能。主要过程为本次使用的是uniapp 使用v
在微信小程序中实现手绘文旅地图的方法
whbke的博客
03-26 1219
如何在微信小程序中实现手绘文旅地图
微信小程序canvas 绘制图表
weixin_42429220的博客
07-03 840
之前做了一个问卷小程序，做了一个将数据可视化保存为图片，如下： 当时仅仅实现绘制饼图，
【微信小程序使用canvas绘制二维码】
weixin_46899191的博客
12-30 1706
1，在util文件夹中的common.js //引入 import drawQrcode from './qrcode.min.js'; import draw2dQrcode from './weapp.qrcode.esm.js'; //导出封装的公用方法 export default{ //老版二维码：canvas-id="testQrcode" qrcode(canvas,text,width,height){ drawQrcode({ width: width || 16
如何在微信小程序中使用echarts绘制地图（微信小程序制作疫情数据地图）
从入门到放弃
02-24 4187
如上图所示的地图怎么样去制作呢？我们现在开始 首先我们先去把该需要的组件文件下载下来ec-canvas下载 以及maoData.json数据下载出来 放到我们的程序目录下 并将mapData.js也放到文件目录中。 放好之后呢我们需要把ec-canvas引入到我们的页面 index/index.json { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } 接下来wxml页面里写入组...
微信小程序利用echarts实现中国任意行政区域地图
abs625的博客
05-06 4364
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴 前言 最近微信小程序中需要绘制地图，然后点击地图可以跳转到下一层级。研究了一番，选择来百度的开源图标框架echarts-for-weixin，不过最近GitHub可能有时候无法访问，使用csdn加速地址也一样Echarts，接下来就分享下实现过程了。 实现 我们先给我们的祖国来张画像，实现一张中国地图。 克隆代码 从上面的地址上面先把代码克隆下来，我们主要使用的就是ec-canvas这个文件夹里面的部分。
微信小程序：实现canvas绘制地图及简单拖动
03-17
在微信小程序中，Canvas是一...总的来说，微信小程序中的Canvas绘制地图并实现拖动功能，涉及到地图API的使用、Canvas绘图技术以及触摸事件的处理。理解并掌握这些知识点，可以帮助开发者创建出更具交互性的地图应用。
小程序地图定位微信小程序源码（含截图）.rar
04-09
【标题】中的“小程序地图定位微信小程序源码（含截图）”表明这是一个关于微信小程序开发的项目，重点在于实现地图定位功能。这个源码可能包含了完整的代码结构、配置文件以及相关的截图，帮助开发者理解并实现类似...
微信小程序-一个简单的微信小程序
08-08
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出的，旨在提供便捷的、无需下载安装即可使用的应用体验。在这个“wechat-weapp-demo”项目中，开发者旨在通过一个简单的实例来熟悉微信小程序...
【微信小程序实战教程】之微信小程序原生开发详解
柯晓楠
07-24 1369
在实际的项目开发中，小程序的内置组件不一定能满足所有的需求，为了实现更高效的代码复用，小程序还允许开发者自行扩充组件，这些由开发者自行设计的组件被称为自定义组件。在小程序中，每个组件都具有独立的逻辑空间，分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中，Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器，自定义组件使用的是Component构造器。
基于微信小程序的自习室选座系统/基于Java的自习室选座系统/自习室管理系统的设计与实现
weixin_47958760的博客
07-24 1023
本课题所设计的小程序自习室选座系统，使用微信开发者与java进行开发，它的优点代码不能从浏览器查看，保密性非常好，比其他的自习室选座系统更具安全性。小程序还容易修改和调试，毕竟自习室选座是在不断发展过程中，难免有更多需求，这点很重要。而且，本系统除了对自习室预约管理，还添加了对学生的资料管理，这也是为了满足自习室选座更深层次的需求。除了上述优势外，本系统还具有：查询迅速，搜索资料方便，可靠性强等等。
微信小程序之计算器
最新发布
ch_s_t的专栏
07-25 1017
data-*是微信小程序的自定义属性，由data-前缀加上自定义的属性名，自定义属性值表示要传递的数据 ，在事件处理函数中通过targert或currentTarget对象的datasett属性获取数据。
微信小程序-粘性组件
qq_53024519的博客
07-25 371
自行实现粘性组件效果
微信小程序实现聊天界面，发送功能
番茄Salad
07-24 1893
【代码】微信小程序实现聊天界面，发送功能。
微信小程序个性化地图图层展示步骤
05-10
微信小程序个性化地图图层展示的步骤如下： 1. 获取用户地理位置：使用微信小程序的 API 获取用户当前的地理位置，得到经纬度信息。 2. 初始化地图：使用微信小程序的开发框架中提供的 map 组件，初始化地图并设置中心点和缩放级别。 3. 添加自定义图层：使用微信小程序的开发框架中提供的 canvas 组件，创建一个自定义图层，将其添加到地图中。 4. 绘制图形：通过 canvas 组件提供的 API 绘制相应的图形，比如圆形、矩形、多边形等等。可以根据经纬度信息将图形绘制在指定的位置。 5. 添加图层事件：为自定义图层添加事件监听器，响应用户的交互操作，比如点击事件、鼠标移动事件等等。 6. 显示图层：将自定义图层显示在地图上，让用户可以看到相应的图形以及与之交互。 通过以上步骤，就可以实现微信小程序个性化地图图层展示了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值