地图的应用场景涵盖生活中的方方面面，比如智慧景区的发展是依托地图APP开发技术实现的，地图以位置信息为基础服务，为景区提供最佳移动端载体，为移动地图产品提供了更大发展机会。未来的发展趋势在于做地图+场景化的运营，挖掘市场商机。互联网的发展赋予了地图“+”更强的能力，如地图+景区能够成为智慧景区，地图+交通能实现智慧交通，在互联网+时代，为移动地图技术的发展带来更多的可能性，同时对于地图本身的价值是不可限量的，为此将其用于场景之中的价值也是不可限量的。因此Mendix平台能发挥地图更多的商业价值。

由于Mendix标准的map组件是基于google谷歌地图封装的，国内用户在体验上不是很友好，因此探索基于国内地图厂商提供的SDK,自定义Mendix地图组件。

简介

用户使用Mendix作为开发的组件类型很多，官方提供了海量的组件，可插拔web小部件是新一代的定制小部件。这些小部件是基于React的，并且使用了与基于Dojo的老式定制小部件不同的体系结构。使用可插拔的web小部件，您可以以简单、精确的方式开发强大的工具。本篇将以封装百度地图API为实践。 本操作指南将教您如何执行以下操作：

• 创建百度地图API账号体系
• 生成Widget组件结构
• 创建百度地图Widget
• 测试验证

前提条件

在开始本操作方法之前，请确保已完成以下先决条件：

安装长期支持（LTS）或当前版本的节点Node.js；

对于Windows，请使用此官方安装程序进行安装https://nodejs.org/en/download/package-manager/#windows；

对于Mac，请使用自制软件和这些官方工具进行安装； 使用以下命令安装Yeoman：

• npm Install yo-g

使用以下命令安装Mendix Pluggable Widget Generator：

• npm Install@Mendix/Generator Widget-g

安装您选择的集成开发环境（IDE)，Mendix建议您使用Microsoft Visual Studio代码。

百度地图账号及密钥获取

1. 打开官网“https://lbsyun.baidu.com/”，打开之后我们可以看到这里是百度地图的开放平台。首先，我们要在百度注册一个账号并需要经过百度的邮箱验证。

2. 接着操作： 3. 点击创建应用之后： 4. 提交之后，复制ak： 5. 最终形式： 注意：Referer白名单，本地测试设置为英文半角星号*即可。

百度地图widget组件开发

首先，生成widget结构 修改相关文件内容：

• 修改BaiduMap.xml内容如下：
• BaiduMap.tsx内容如下：

测试验证

• 在dist目录下生成mpk包，然后放到空的项目里面的widget目录；
• 修改项目的index.html文件内容，添加如下内容：

项目启动

运行效果： 这里仅仅使用了百度地图API的一小部分，实际上其功能十分强大。比如GPS定位功能，全景地图功能，个性化地图设置等功能。

————————————————

更多信息，请访问以下链接：

Mendix官网：https://www.mendix.com/zh/

Mendix行业解决方案：https://solutions.mendix.com/

Mendix平台指南：https://www.mendix.com/evaluation-guide/

Mendix动画展示：https://www.mendix.com/demos/

Mendix公众号 ———————————————— 版权声明：本文为CSDN博主「Mendix」的原创文章 原文链接：https://blog.csdn.net/Mendix/article/details/116303691