在微信小程序中加载可视化三维地图的方法

最新推荐文章于 2025-10-23 01:41:00 发布
原创 最新推荐文章于 2025-10-23 01:41:00 发布 · 7.7k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #webview #数据可视化 #可视化

本文介绍了如何在微信小程序中加载FengMap室内地图。通过使用<web-view>组件，结合微信小程序的注册、HTTPS服务器配置、业务域名添加等步骤，实现了将FengMap地图以外链方式引入到小程序中。

蜂鸟视图：FengMap 室内地图对接微信小程序的开发说明

 

  • 描述

实现微信小程序加载FengMap地图，主要通过小程序<web-view>组件的src属性的外链方式加载，如<web-view src=”https://fengmap.com/wx/”></web-view>；因为FengMap地图底层渲染技术为WEBGL，小程序本身不支持，只能使用外链的方式加载。

  • 流程
    1. 注册微信小程序账号网址（https://mp.weixin.qq.com/），选择账号类型必须是企业类型账户；
    2. 需要一台https服务器；
    3. 在开发账号设置添加业务域名为当前https服务器地址的域名，并按要求上传.txt文本(添加域名有下载txt文本链接)及其相应的程序到该服务器中；
    4. 使用带有开发者权限的账号登陆微信开发工具，添加一个新页面，使用<web-view>组件链接到https服务器的程序地址，即可预览；
  • 备注

微信小程序注册

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=ind

最低0.47元/天 解锁文章
蜂鸟云平台 JavaScript SDK 与微信小程序 SDK v3.1.5 更新分析
fengmap group
12-17 1158
通过新增的功能，如 FMCompositeMarker 的缩放适应模式、FMFusionTool 的数据融合支持、FMReflect 反射效果等，使得蜂鸟云平台的地图开发工具在功能上更为强大，适应性更强。这种模式结合新增的 rectangle 参数，用于展示一种固定尺寸的 marker，且可随地图缩放而缩放，极大地提高了标注显示的灵活性和适应性。新增的 zoomSpeed 属性允许开发者更精确地控制地图缩放的速度，提升了用户在不同设备上的交互体验，尤其是在需要快速放大或缩小地图时，确保平滑的过渡效果。
3D地图+智能导航，用微信小程序轻松实现校园内导航
minidididi的博客
03-26 5543
大学都读完还没有走过学校的每一个角落已经是老生常谈了，但新生入学一般更绝望。一般的新生入学，学校需要发动大量的志愿者对新生进行引导，从报道处再到宿舍楼、教学楼、食堂、各办公楼都为新生一一进行讲解，但因为校园面积过大，缺少指示标志，新生也还是经常会面临找不到路的问题。而“城区级学校”和新建校区则更是让师生都困扰万分，这时候永拓科技的校园导航系统就派上用场了。 编者说的这个3D校园导航系统他真的，他是那种很全面的：通过构建一张校园地图为坐标，可视化展示校园全貌，为用户提供2D/3D地图、导航、迎新报道等便捷服
如何快速在微信小程序中实现3D效果？threejs-miniprogram完整指南
最新发布
gitblog_00763的博客
10-23 538
**threejs-miniprogram** 是 Three.js 的微信小程序适配版本，让开发者能在小程序环境中轻松集成专业级3D图形渲染能力，无需复杂配置即可创建交互式3D场景。 ## ???? 核心功能解析 ### ✨ 小程序专用3D引擎 基于Three.js核心能力深度优化，完美适配微信小程序的渲染环境，支持模型加载、光照系统、相机控制等完整3D特性。通过`src/index.js`提供...
微信小程序-3D地图场景+定位导航-法院3D室内导航系统-为群众提供诉讼全流程导航服务
minidididi的博客
03-28 3905
随着互联网信息的快速发展，我国的信息化水平也得到了全面的提升。尤其近几年在疫情的影响下，微信的小程序应用已经渗入生活的方方面面，无论是日常出行的健康码还是线上商城的购物，小程序以其轻便、响应速度快、不占内存的特点，正在被越来越多的人所接受。 今天要说的永拓法院3D室内导航系统就是可用于微信小程序端和一体机终端的导航应用，可深度结合法院信息化系统，为办事群众提供整个办事流程过程的导航、引导服务。 图片来源：永拓科技 永拓科技3D法院导航系统可以打通诉讼全流程，提供一站式智能引导服务，助力智慧法院建设。在满足
微信小程序之地图功能
热门推荐
crazy_jack
02-12 15万+
转载请注明出处：http://blog.youkuaiyun.com/crazy1235/article/details/55004841本篇blog主要介绍微信小程序中的地图模块相关功能。基本使用地图组件使用起来也很简单。.wxml<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{con
医院导航微信小程序-可秒级打开-3D室内导航系统-可对接his系统
minidididi的博客
04-15 2286
在近几年抗疫的背景下，以及相关政策的影响下，为了更好开展医疗工作，各医院都积极进行医疗信息化建设升级，以加强基层医疗服务能力。为了最高效率提升患者的就诊服务，现许多医院已开设了网上挂号、his系统以及医院自助缴费机等服务。 但是由于现在各大医院门诊科室及院楼众多原因，许多的患者无法快速正确的抵达就诊科室，因此医院导航就变得十分必要，永拓科技3D室内导航系统，全覆盖来院导航以及院内导航场景，为患者提供更便利的就诊服务。 三维地图 为使得医院导航系统的使用操更加简明，主界面采用的设计是以医院地图为主体，左侧为功
微信小程序之地图
青烟小生的博客
07-19 7190
微信小程序之地图 简介 ​ 腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！ 操作： 申请开发者密钥（key）：申请密钥 开通webse
【微信小程序】Three.js 加载3d模型
牛哞哞杂记
04-11 3万+
微信小程序实现从外部加载3d模型 1.3d模型的几种格式？ 2.怎样加载3d模型？ 1.模型的格式 小程序支持从外部加载3d模型的几种格式有： a.obj格式 b.gltf格式 c.glb格式 d.fbx格式 就列举这几种 2.加载3d模型 用 gltf 格式的模型 （1）首先下载 three.js github地址 下载的文件目录里 threejs-miniprogram-master\exa...
精选资源
微信小程序中国行政区域地图数据
05-06
在微信小程序开发中，地图功能是一项常见的需求，用于展示地理位置、导航或数据分析。"微信小程序中国行政区域地图数据"提供了一种解决方案，帮助开发者在小程序内绘制完整的中国行政区域地图。这一资源通常包括了...
精选资源
threejs微信小程序应用.zip
06-21
在当前的数字化时代，Web开发领域正逐渐向三维可视化转变，Three.js作为一款强大的JavaScript库，使得在浏览器中创建3D图形变得简单易行。在这个“threejs微信小程序应用.zip”压缩包中，我们看到Three.js技术被巧妙...
微信小程序JS加载esmap地图的实例详解
10-16
主要介绍了微信小程序JS加载esmap地图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
OpenGL趣味小程序-地图
07-28
OpenGL（Open Graphics Library）是个定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。
微信小程序 加载网页 加载web-view
^璐三岁要耍蓅氓♡
11-03 3824
微信小程序终于开放了加载网页页面的接口。使用很简单，可以看文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/web-view.html。 要注意的问题是设置后台，后台里竟然有个业务域名。具体的位置如下： 需要注意的是，添加的业务域名必须是HTTPS加密的，也就是申请过SSL证书的。这样就可以根据文档来加载网页了。
小程序 web-view 使用
qq_38686150的博客
09-10 271
web-view 组件是一个可以用来惩戒网页的容器 会自动铺满整个小程序页面 注意个人类型 与 海外类型 的小程序 暂不支持使用 <web-view src = "https://mp.weixin.qq.com/"> </web-view> 如果想在H5 页面调用小程序提供的一些接口 就必须在H5页面中引入JS <script src="https:res.wx.qq.com/open/js/jweixin-1.3.3.js"> </script&g.
医院可视化系统建设，3D室内导航手机小程序功能汇总
minidididi的博客
04-13 939
在这个信息化广泛普及的年代，越来越多的医院正在普及智慧医院3d室内导航系统。这套系统的手机小程序有哪些实用功能呢？医院3d室内导航系统手机端基于微信平台研发，采用B/S架构，具备开放数据接口，可以与医院现有的信息化系统集成，提供智慧导诊、室内导航一条龙服务提升医院信息化便民服务水平。
uniapp 3D地图 效果模拟 mapbox 或者 其他设备
weixin_68266812的博客
04-12 2236
module="mapContainer" lang="renderjs" 的更改。如果你还添加一些东西怎么办呢 只需要在加一个script 就可以了。一, mapbox 地图 先进行数据的引入 然后在行。腾讯位置服务 - 立足生态，连接未来 (qq.com)二， uniapp 腾讯地图的 使用方式。首先打开uniapp 找到 地图选项。
微信小程序webgl+Three.js初试水（二）
sinat_33342614的博客
08-23 2493
在上一篇文章，我们成功实现了一个会转的转盘，接下来继续实现关于飞刀的部分。 飞刀类 飞刀的行为主要有两个：展示飞刀，飞刀飞向转盘。 和之前的转盘类一样，我们直接将飞刀类继承THREE.Group： // 忽略文件名的命名，因为我的场景它是一支笔 // /game/Pen.js class Pen extends THREE.Group { // canvas对象 canvas constr...
微信小程序室内定位解决方案RAR腿S91
weixin_28913879的博客
08-04 1083
微信小程序，也被简称为“小程序”，是一种不需要下载安装即可使用的应用，它实现了“触手可及”的应用概念，用户扫一扫或搜索即可打开应用。与传统APP不同的是，小程序借助微信生态，实现了快速的用户触达和服务集成，成为企业营销和服务的新窗口。面对室内定位技术在实际应用中出现的问题，案例研究揭示了多种解决方案。例如，某大型购物中心在实现室内导航服务的过程中，面临到多层复杂建筑结构导致的定位误差问题，最终通过引入精准定位算法和使用更多的参考点（如蓝牙信标）来提高定位精度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值