--- title: "在移动应用程序中创建自定义地图" date: "2019-09-18" categories: - "mobile" - "mobile-development" - "mobiletogether" - "xquery" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "xquery" description: 了解如何使用 MobileTogether，通过 XQuery 表达式在移动应用程序中创建动态的自定义地图，并根据用户实时输入调整地理位置信息。 --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #xquery 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) | [xpath+xquery](/blog/zh/category/xpathxquery.md) # 在移动应用程序中创建自定义地图 在之前的文章中，我们介绍了如何在跨平台移动应用中[集成地图](https://www.altova.com/blog/integrate-maps-into-mobile-apps/)，使其与每个用户设备的本地地图应用程序协同工作。我们的示例应用程序生成了一张地图，其中用标记标示了美国的主要机场。插图中展示了同一应用程序在安卓手机、iPhone和Windows桌面上的地图显示效果。 如果需要绘制的地点列表并非事先确定，而是根据用户在运行时产生的活动动态生成，该怎么办？Altova 提供的 [低代码跨平台移动开发工具 MobileTogether](https://www.altova.com/zh/mobiletogether) 也赋予了开发者在移动应用中，根据运行时生成的地理位置列表，即时构建自定义地图的能力。 ![](/blog/images/Blog_MT_windmill.jpg) 这里展示的是一个移动应用程序中的窗口，它通过RESTful API请求，根据用户输入的关键词，获取附近位置的列表。 [![为移动应用程序中的自定义地图创建地理位置列表](/blog/images/custom_search.png)](custom_search-e1568826839242.png) 如果您是一家企业，正在寻找一个合适的地点来建设新的数据中心，那么一张地图将是搜索结果中非常有用的补充信息。 [![一个用户创建的地理位置列表，用于定制地图](/blog/images/search-results-list.png)](search-results-list.png) 正如我们在之前发布的“机场状态”应用程序中展示的，MobileTogether 地图控件包含以下属性：用于定义标记的设置，用于显示地图的视图窗口，以及当用户在地图上点击某个标记时需要执行的控制操作。 [![跨平台移动应用中，地图的属性定义](/blog/images/properties-1-1.png)](properties-1-1.png) 在“机场状态”应用程序中，所有主要机场的标记列表都被硬编码到“XPath/XQuery 编辑器”窗口的“标记”属性中 [![移动应用程序中用于自定义地图的、预先设定的地理位置标记列表](/blog/images/marker-list-1.png)](marker-list-1.png) ### 一个用于创建地图标记的 XQuery 表达式 这些标记不必进行硬编码。相反，移动应用程序中自定义地图的所有标记列表都可以通过一个 XQuery 表达式来构建。为了在移动应用程序中创建自定义地图，我们需要一个基于 REST 搜索查询结果的 [XQuery 的 For-Let-Where-Order-Return (FLWOR) 表达式](https://www.altova.com/zh/mobiletogether/xpath-intro)。 FLWOR表达式中的`let`、`where`和`order`参数是可选的，对于我们的标记列表，我们不需要使用它们。我们只需要使用`For`和`Return`来处理REST请求返回的地点列表： [![一个 XQuery 表达式，用于在移动应用程序的自定义地图上创建标记 ](/blog/images/marker-list-2.png)](marker-list-2.png) 即使不使用 "let"、"where" 和 "order" 参数，构建一个有效的 XQuery 表达式也可能需要多次尝试。这时，XQuery 表达式窗口中的“评估器”部分就非常有用。点击“评估器”按钮，您可以边工作边测试表达式，从而更容易找到正确的写法。 [![使用 XQuery 评估器测试 XQuery 表达式](/blog/images/marker-list-evaluator.png)](marker-list-evaluator.png) 如果表达式包含错误，则计算将失败，并且错误信息将显示在“结果”窗口中。 我们在MobileTogether Designer中打开了XQuery表达式窗口，同时模拟器正在运行正在开发的应用程序。但在之前，我们首先使用模拟器进行文本搜索，从而获取到来自REST查询的实时数据，该查询针对德克萨斯州阿马里洛市100英里范围内“风力发电”相关的信息。请注意，在上面的屏幕截图的左下角显示的搜索结果中，公司名称“Cielo Wind Power LLC”被用于生成标记1的文本元素，该元素显示在右侧的评估结果中。 一旦我们对表达式的运行效果感到满意，我们只需将一个新的地理位置地图控件拖动到搜索结果页面上，然后将该表达式复制并粘贴到“标记”（Markers）属性中。以下是在MobileTogether Designer中，带有地图的页面的效果图： [![在 MobileTogether 设计器中，将地理位置地图控件添加到移动应用程序的设计中](/blog/images/map-design.png)](map-design.png) 现在，我们可以设置地图的其他属性，以使其最适合我们的应用程序。我们选择了一种带有缩放控件的街道地图类型。其他可用的地图类型包括卫星地图或一种结合了卫星图像和街道信息的混合地图。“视图区域”属性为空，因为 MobileTogether 会自动设置视图区域，使其包含地图上所有标记，这些标记的具体内容由运行时 XQuery 表达式定义。我们还使用了一个 XQuery 表达式，以便只有当 REST 请求的结果数量大于零时，才显示地图。 以下是地图属性辅助窗口的界面截图： [![在 MobileTogether 设计器中，为移动应用程序中的自定义地图定义属性](/blog/images/map-control-styles.png)](map-control-styles.png) “控制宽度”和“控制高度”这两个属性的设置，允许 MobileTogether 自动为每个移动设备设置地图的尺寸。 我们希望在用户点击标记时，向其显示更多关于该位置的信息。这在“控制操作”属性中进行定义。用于“控制操作”的三个点按钮会打开一个“操作”对话框，开发者可以在其中定义多个操作： [![为移动应用程序中的自定义地图，定义用户点击标记时执行的操作](/blog/images/click-actions.png)](click-actions.png) 我们的应用程序使用 MobileTogether 的扩展功能来收集关于被点击标记的信息，然后打开一个子页面，用于显示该位置的详细信息。 以下展示了该应用程序在 iPhone 上的结果页面，以及用户在 Android 手机上点击一个标记后显示的子页面 ![移动应用程序在iPhone和Android手机上运行，展示了自定义地图的截图](/blog/images/map-results.png) 结果详情子页面上的“查看发电数据”按钮可以查询数据库，以查看所选风电场的历史发电数据。 亲自体验一下，看看在移动应用中创建自定义地图有多么简单。下载... (此处应补充完整，例如：SDK、示例代码等) [免费使用的 MobileTogether 设计工具](https://www.altova.com/zh/mobiletogether/download), 这包括在线帮助文档和示例应用程序。 了解更多使用 MobileTogether 开发的应用程序，并观看视频演示，请访问：[https://www.altova.com/mobiletogether/demos](https://www.altova.com/zh/mobiletogether/demos)