FengMap JavaScript SDK for 微信小程序 beta 快速开发指南

在当前版本中，SDK 基于微信小程序基础库 v2.11.0 及以上版本进行编译开发，使用规则有局部的变化，用来适用微信小程序。

注意：在当前版本中，使用的图片资源，例如，FMImageMarker，顶面贴图，模型纹理等，图片的宽度和高度需要满足 2的N次方。例如，16，32，256，512 等

微信白名单设置

由于微信本身的安全策略，请在小程序后台将以下域名加入到您的 request合法域名 中

https://console.fengmap.com

地图初始化

在 beta 版本中,我们需要向使用地图的主界面 wxml 文件中添加两个 canvas，分别用来作为地图渲染时使用的容器和用作临时渲染图像的使用。其中，作为主地图渲染的 canvas 需要分别绑定 touchMove，touchMove 和 touchEnd 三个事件用来响应手势的交互控制，用作临时渲染的容器设置样式为 display:none 进行隐藏。

定义界面容器

    <canvas type="webgl" id="fengmap" style="width: 100%; height: 100%;" bindtouchstart
    ="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    <canvas type="2d" id="overlay" style="display:none"></canvas>

初始化地图容器

    // 获取canvas
    wx.createSelectorQuery().select('#fengmap').node().exec((res) => {
      const canvas = res[0].node;

      wx.createSelectorQuery().select("#overlay").node().exec((tempRes) => {
        const tmpCanvas = tempRes[0].node;

        var mapOptions = {
          container: canvas, // 必要，webgl画布
          tempCanvas: tmpCanvas, // 必要，2d画布
          appName: '蜂鸟研发SDK_2_0',
          key: '57c7f309aca507497d028a9c00207cf8',
        };

        //初始化地图对象
        fmap = new fengmap.FMMap(mapOptions);
      })
    })

注册事件

    Page({
        touchStart(e) {
        this.canvas.dispatchTouchEvent({
          ...e,
          type: 'touchstart'
        })
        },
        touchMove(e) {
        this.canvas.dispatchTouchEvent({
          ...e,
          type: 'touchmove'
        })
        },
        touchEnd(e) {
        this.canvas.dispatchTouchEvent({
          ...e,
          type: 'touchend'
        })
        }
    })

更多内容，请访问 蜂鸟云开发者中心