微信小程序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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
js图片上传的封装代码
Aug 01 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
前端微信支付js代码
2016/07/25 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
怎样使用Python脚本日志功能
2016/08/14 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
pybind11在Windows下的使用教程
2019/07/04 Python
django 单表操作实例详解
2019/07/30 Python
python输出带颜色字体实例方法
2019/09/01 Python
python pycharm的安装及其使用
2019/10/11 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
linux面试题参考答案(6)
2014/08/29 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
2014年班组工作总结
2014/11/20 职场文书
出国留学单位推荐信
2015/03/26 职场文书
自荐信格式模板
2015/03/27 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书