由于某些众所周知或者是中所不知的原因，在微信的小程序中我们只能调用腾讯自家的地图（差评），看着Mapbox绝美的样式只能望洋兴叹。在耗费了200根工程师的头发之后我们终于想到了一个曲线救国的方案（PS：工程师的头发可值钱了，尤其是高级工程师），先看效果：

怎么样，是不是很神奇？！

How?

或许你已经想到了，没错，我们是通过微信提供的 web-view 组件来实现的。

想要通过web-view调用Mapbox的地图需要满足以下的条件：

1. 小程序的是企业主体，微信web-view组件不对个人类型的小程序开放。
2. 有自己的域名，在嵌入网页的时候需要在微信后台验证域名。

Learn by action

1. 域名验证

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

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

这里我们需要下载一个微信的验证文件放在你域名的根目录下，并且支持访问。如你的域名是abc.com，微信的验证文件是WATLNxupm4.txt，你需要确保 abc.com/WATLNxupm4.txt可以公开访问。

确认一起无误之后，点击保存即可。

2. 嵌入带有地图的web-view

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

<web-view src="https://abc.com/map.html"/>

其中abc.com/map.html是带有地图的H5页面，这里需要注意的是微信小程序的web-view只能是全屏的并且会覆盖页面中的所有其他组件。

至于如何使用Mapbox地图，可以参考Mapbox的官方说明

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

• 如果想在网页中判断是否处于微信小程序中可以通过 window.__wxjs_environment === 'miniprogram' 来判断
• 如果网页想给小程序传递信息，可以通过wx.miniProgram.postMessage方法。
• 小程序中可以通过postMessage方法监听网页传递回来的数据，但是该方法仅在特定时机（小程序后退、组件销毁、分享）触发，没法实时传递消息。

总结

总得来说，通过web-view的方法嵌入地图是一种曲线救国的方法，交互和性能有可能达不到微信小程序一样的流畅，但是这种方式也给我们带来了一些新的解决问题的思路。特定需求下，我们可以通过web-view完成一些微信组件没法实现或者不方便实现的功能，然后再通过postMessage回传给微信小程序。还有就是强烈不推荐把所有的东西都放在H5中，然后直接嵌入到微信小程序中，先不说会不会通过微信的审核，从交互体验上来说很多页面中的功能和微信小程序原生组件还是有一定差距的。