微信小程序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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
微信小程序实现拼图小游戏
Oct 22 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
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
CI框架表单验证实例详解
2016/11/21 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
python读写文件操作示例程序
2013/12/02 Python
Python 爬虫图片简单实现
2017/06/01 Python
python生成ppt的方法
2018/06/07 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
方法名是否可以与构造器的名字相同
2012/06/04 面试题
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
2015年反洗钱工作总结
2015/04/25 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
仙境之桥观后感
2015/06/16 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL