--- title: "将地图集成到移动应用程序中" date: "2019-07-17" categories: - "app-development" - "mobile" - "mobile-development" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "web-services" description: 使用MobileTogether，您可以轻松地将地图集成到移动应用程序中。该平台提供定制的地理位置功能和交互式标记，从而提升用户体验。 --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #web-services Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [mobile-development](/blog/zh/category/mobile-development.md) | [mobile-development](/blog/zh/category/mobile-development.md) # 将地图集成到移动应用程序中 开发者可以利用移动设备中的地理位置功能，创建高度定制化的基于位置的应用。现在，Altova 提供的 [跨平台、低代码移动应用开发工具](https://www.altova.com/zh/mobiletogether) MobileTogether，支持将地图深度集成到所有主流移动平台上的应用程序中。 开发者可以将地图集成到移动应用程序中，添加自定义标记，并根据用户在地图上的点击操作定义自定义功能。例如，一家企业可能希望其应用程序包含所有分公司位置的地图，然后在用户点击某个分公司时，显示该分公司的当前库存信息。 在之前的文章中，我们介绍了一款移动应用程序，该应用允许用户通过选择下拉菜单中的机场代码来查看美国主要机场的运行状态。另一种方法是，用地图上的标记（或图标）来代替下拉菜单中的47个选项。 我们来看一个例子。 ![](/blog/images/airport_700x335.jpg) 以下截图展示了“机场状态”应用程序在安卓手机、iPhone以及Windows桌面应用程序上的运行界面。 [![将地图集成到跨平台移动应用程序中，实现统一视图](/blog/images/cross-platform-view.png)](cross-platform-view.png) 在每个设备上，地图都是使用其内置的、原生的地图应用程序生成的。最终用户将在每个平台上自动看到熟悉的样式和格式。 如果地图显示的信息导致某些状态信息超出屏幕底部，可以通过垂直滚动来查看这些信息 [![将地图集成到移动应用程序中，并采用垂直滚动方式，以便用户可以完整地查看状态信息](/blog/images/scroll-view-android.png)](scroll-view-android.png) 您可以使用 MobileTogether Designer 的可视化布局功能，将地图控件拖动到移动应用程序中，从而将地图集成到移动应用中。您可以自定义每个地图的属性。下图显示了我们主页面的一个部分，以及右侧的地图属性辅助窗口。 [![使用 MobileTogether Designer 这一可视化工具，将地图集成到移动应用程序中](/blog/images/design-view.png)](design-view.png) 可用的地图类型包括街道地图、卫星地图和混合地图。除了可选的缩放控制功能外，所有触摸屏设备都支持用一根手指滑动地图，以及常用的双指捏合手势来放大或缩小地图。 要显示的地图区域基于一个或多个标记（marker）的列表，这些标记使用 `mt-geo-map-marker` 表达式进行定义。每个标记包含一个 ID、标题和文本字段。当点击标记时，可以获取这些字段的值。 [![将地图集成到移动应用程序中，并使用自定义地图标记](/blog/images/map-markers.png)](map-markers.png) 记号笔的颜色可以是标准颜色，如红色、绿色和蓝色，也可以使用自定义颜色代码来指定，就像我们上面使用的那样。 “视图范围”属性定义了地图的总显示区域，通过设置地图左上角和右下角的坐标来实现。如果未设置该属性，则默认的视图范围将包含所有已定义的标记，并加上一小部分空白区域。我们为北美地区的大部分区域定义了一个视图范围，并设置了初始值。 [![用于设置地图缩放级别的视口表达式](/blog/images/viewport-expression.png)](viewport-expression.png) “控制操作”属性定义了当用户点击地图上的任何一个标记时会发生什么。我们的应用程序会读取标记的标题，该标题是一个由三个字母组成的机场代码，然后使用该代码从美国联邦航空管理局（FAA）的Web服务中获取机场状态信息，并更新显示内容。 我们的应用程序会计算新的视口坐标，以便放大显示所选机场的地理位置 [![根据视口表达式自定义缩放级别](/blog/images/map_zoom-541x1030.png)](map_zoom.png) 亲自体验一下，看看将地图集成到移动应用程序中有多么简单。下载... (此处应补充完整，例如：相关文档、SDK 等) [免费使用的 MobileTogether 设计工具](https://www.altova.com/zh/mobiletogether/download), 它包含在线帮助文档和示例应用程序。您还可以获取我们的 [机场状态应用程序，可在 GitHub 上找到](https://github.com/altova/MobileTogether-more-examples/tree/master/Web%20Services) 您可以直接在设计器中运行它，或者在自己的移动设备上进行试运行。 了解更多使用 MobileTogether 开发的应用程序，并观看视频演示，请访问：[https://www.altova.com/mobiletogether/demos](https://www.altova.com/zh/mobiletogether/demos)