小程序正在以一种轻量级的方式成为Pre-App的一种，以测试该App的功能和用户场景，从而使在正式App中做出更明智的决策变得更加容易。

不幸的是，在微信小程序中，仅支持您自己的地图，例如最基本的地图显示。

因此，当开发人员看到Mapbox的精美样式时，他们真的只能叹息吗？

在Mapbox图库中，背面有更漂亮的Mapbox地图样式

当然不是！

让Mapbox中国地图工程师（地图工程师）墨菲在下面告诉您

在微信小程序中如何

自由显示想要的地图效果

是否显示地理位置

静态数据可视化

或导航信息...

满足您的所有愿望

让我们先来看一些效果

在微信小程序中，您不仅可以显示中文地图

您还可以切换地图样式

可以免费添加Mapbox Studio中的各种艺术风格的地图样式

支持显示室内3D地图

它还可以进行数据分析，例如当今最受欢迎和最酷的热图

也有卫星云图

显示卫星云图

这也很棒！

小程序和地图可以很有趣6

它是怎么发生的？

⚖️

实施原则

是的！也许您已经想到了。我们通过微信提供的网络视图组件实现了它。简而言之，它是直接在小程序中打开一个交互式网页（显示您的Mapbox GL JS技能的时间到了）。

不是那么简单！我们刚刚发布了一个教程“ Mapbox交互式故事地图”，该指南从零开始，用于在两周前制作Mapbox交互式网页|它带有27种交互式动画源代码，可以直接使用吗？

br />在小程序中显示Mapbox需要满足的两个条件

但是，根据该文档，要通过Web视图调用Mapbox的地图，必须满足以下两个条件：

1.小程序是一个企业实体，微信网络视图组件未对个人小程序开放。

2.您需要拥有自己的域名，并且在嵌入网页时需要在微信背景中验证域名（只有域名下的网页才能正确显示，您可以'只是找到一个公共链接。

微信小程序开发界面

如果您同时满足以上两个条件，请按照以下步骤逐步操作！

br />详细的实现步骤

br />准备学习材料

域验证

根据微信平台的规定，网络视图所指向的地址必须是在微信小程序后端中注册的域名，否则提示“不支持打开非商业域名，请重新配置”。

首先，我们在微信的背景中找到development>开发设置>商业域名模块，并填写您需要绑定的域名。

请注意，此处的域名是强制性的https，并且需要配置https证书。购买服务器时，请注意购买支持https的服务器。

接下来，我们需要下载微信验证文件，将其放在您域名的根目录中，并支持访问。

具体来说，如果您的域名为微信的验证文件为WATLNxupm4.txt，则需要确保

https; //// WATLNxupm4.txt可公开访问。

确认没有错误后，单击“保存”以成功保存。

嵌入具有地图的网络视图

此过程实际上非常简单。找到您的微信小程序 .wxml文件并添加以下代码

/map.html是包含地图的H5页面。这个H5页面实际上是使用Mapbox GL JS创建的页面。您可以通过以下两种方式构建此页面：

无论您使用哪种方法，都只需要允许“您的域名/xxx.html”访问您要显示的页面即可。

此处应注意：微信小程序的网络视图只能全屏显示，并且将覆盖页面中的所有其他组件。

小程序一些用于网络浏览的提示

br />摘要

通常，通过Web视图嵌入地图是一种节省国家/地区的曲线方法。交互和性能可能不如微信小程序那么平滑，但是这种方法也带给我们一些新的想法。解决问题的想法。

根据特定要求，我们可以使用Web视图完成微信组件无法实现或不方便的某些功能，然后通过postMessage将其发送回微信小程序。

强烈建议不要将所有内容放在H5中，然后直接将其嵌入微信小程序中，更不要说它是否会通过微信的审查。从交互体验来看，许多页面功能和微信小程序本机组件仍存在一定差距。

br /> br />还有更多效果！

除了我在开始时向您展示的内容之外，Mapbox的灵活性和开源功能还可以使您在短时间内快速实现多种效果。

以下是开发人员在短短几个小时内实现的小程序效果

显示中国地图（少女风格）

Mapbox地图编辑器

3D地图显示

集群数据的可视化

点击图标以弹出简介

显示视频

地理编码，搜索位置

我希望您可以在小程序中添加漂亮的Mapbox地图！

希望您能与我们分享您的工作。不久的将来将会有一件大事，您可以通过提交论文来获得中文版的《地图设计指南》小册子。

活动|将DIY地图用于中文版的“地图设计指南”，您想要吗？

本文中涉及动画的完整源代码

请在Mapbox 微信的背景中回复“ 小程序”以获取它