地图的应用场景涵盖生活中的方方面面，比如智慧景区的发展是依托地图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://forum.mendix.tencent-cloud.com/

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

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

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

感谢阅读！

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

百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
百度地图api html信息窗口,百度地图 javascript api自定义信息窗口
百度 js api中存在infoWindow的类,就是marker 点击后显示的信息窗口, 他存在一下问题 1.在map中只能显示一个infowindow, 2.该信息窗口的样式无法修改,显示的内容具 ...
根据百度地图API自定义切换地图类型为卫星或普通
业务场景根据实际业务场景的需要,不能直接使用百度地图的控件,所以打算用百度地图API中map类的setMapType()方法实现.在Vue3中使用百度地图API切换地图类型为卫星或普通,创建一个自定 ...
WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现...
原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...
如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现
去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有 ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
iPortal地图大屏自定义组件示例--立体地图
作者:刘大通过iPortal地图大屏自定义组件要点梳理这篇文章,我们基本了解了地图大屏如何进行自定义,也准备好了开发环境,那我们就接着进行实际操作下吧. 立体建筑实质是mapboxgl中的" ...
百度地图api 自定义覆盖范围及背景颜色
百度地图自带根据行政区划覆盖,只要使用api输入行政区划就可自动覆盖对应的行政区域,但是想要覆盖自定义的区域该方法就无法适应需求,百度地图JavaScript API中有一个创建多边形的方法,可使用此 ...

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

简介