探索国内地图厂商API，自定义Mendix 组件

地图的应用场景涵盖生活中的方方面面，比如智慧景区的发展是依托地图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代码

 

 

百度地图账号及密钥获取

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

接着操作：

 

点击创建应用之后：

 

提交之后，复制ak：

 

最终形式：

注意：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公众号

 

谢谢阅读！