微信小程序JS加载esmap地图的实例详解


Posted in Javascript onSeptember 04, 2019

一、在微信小程序里显示室内三维地图 需要满足的两个条件

调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件:

1. 小程序是企业主体,微信 web-view 组件不对个人类型的小程序开放。

2. 您需要有一个自己的域名,在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接)。

微信小程序JS加载esmap地图的实例详解

二、具体实现步骤

1、域名验证:

由于微信平台的规定,web-view 指向的地址,必须是在微信小程序后台登记的域名,否则会出现“不支持打开非业务域名,请重新配置”的提示。

首先我们在微信的后台找到开发 > 开发设置 > 业务域名模块,并填上你需要绑定的域名。

微信小程序JS加载esmap地图的实例详解

需要注意的是,这里的域名强制 https,需要配置好 https 证书,购买服务器的时候也要注意购买支持 https 的服务器。

接下来,我们需要下载一个微信的验证文件,放在你域名的根目录下,并且支持访问。

具体来说,如果您的域名www.esmap.cn,微信的验证文件是WATLNxupm4.txt,您需要确保https://www.esmap.cn/WATLNxupm4.txt 可以公开访问。确认无误之后,点击保存即可成功保存。

注:小程序所有用到的https请求都需要配置合法域名

2、嵌入带有室内地图的web-view

这个过程其实很简单,找到你微信小程序的.wxml文件,添加以下代码         

<web-viewsrc="https://www.esmap.cn /esmap.html"/>

其中 https://www.esmap.cn /esmap.html 是带有地图的 H5 页面

室内地图制作流程,您可以使用下面两种方式构建这个页面:

1) 从https://www.esmap.cn 官网中复制测试地图源码DEMO,在您自己的服务器进行免费部署。

2) 参考https://www.esmap.cn 室内三维地图SDK开发说明,在您已有的 H5 页面上添加自己制作的室内地图。

3、小程序 web-view 的一些提示

微信小程序的 web-view 只能是全屏的,并且会覆盖页面中的所有其他组件。

1) 如果想在网页中判断是否处于微信小程序中

var ua = window.navigator.userAgent.toLowerCase();
  if (ua.indexOf('micromessenger') == -1) {//说明不在微信中
    // 走不在小程序的逻辑
  } else {
    wx.miniProgram.getEnv(function(res) {
      if (res.miniprogram) {
        // 走在小程序的逻辑
      } else {
        // 走不在小程序的逻辑
      }
    })
  }

2) 如果网页想给小程序传递信息,可以通过 wx.miniProgram.postMessage 方法。

3) 小程序中可以通过 postMessage 方法监听网页传递回来的数据,但是该方法仅在特定时机(小程序后退、组件销毁、分享)触发,没法实时传递消息。

4) 网页跳转到小程序页面

wx.miniProgram.navigateTo({
   url: '/pages/esmap/esmap?location=' + obj.location
  });

三、更多效果!

微信小程序JS加载esmap地图的实例详解微信小程序JS加载esmap地图的实例详解

更多室内三维地图引擎例子功能体验

https://www.esmap.cn/sdk-demo/demo/index.html?tt=cnblogs5

总结

以上所述是小编给大家介绍的微信小程序JS加载esmap地图的实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
深入浅出vue图片路径的实现
Sep 04 #Javascript
webpack 如何解析代码模块路径的实现
Sep 04 #Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 #Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 #Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 #Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 #Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php实现的mongodb操作类
2015/05/28 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
php实现session共享的实例方法
2019/09/19 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
简单的js分页脚本
2009/05/21 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python中有帮助函数吗
2020/06/19 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
员工自我鉴定范文
2013/10/06 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
学校运动会通讯稿
2015/07/18 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
css3实现的加载动画效果
2021/04/07 HTML / CSS
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
Mysql文件存储图文详解
2021/06/01 MySQL
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL