微信小程序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 相关文章推荐
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
PHP4之真OO
2006/10/09 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Django 用户认证组件使用详解
2019/07/23 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Django models filter筛选条件详解
2020/03/16 Python
python如何查看网页代码
2020/06/07 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
UNIX文件类型
2013/08/29 面试题
小学后勤管理制度
2014/01/14 职场文书
交通事故协议书
2014/04/15 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
python中validators库的使用方法详解
2022/09/23 Python