Axure嵌入GIS地图

Question

如题所述

Answer 1

Axure在进行原型设计时，经常需要引用GIS地图。通常情况下，我们会通过内联框架元件来调用公网地图，但这种方式的地图内容无法进行修改。以下以高德地图为例，介绍如何通过JavaScript注入来实现Axure自定义GIS地图的嵌入。

1、地图构建

在打开高德地图API官网时，由于是通过JavaScript注入的方式进行嵌入，因此选择了异常加载地图方式，这样可以使地图加载更加顺畅。示例地址为：lbs.amap.com/demo/javas...

2、Axure引用

2.1 创建容器

在Axure界面中，拖入一个矩形作为地图容器，并将其命名为“container”（可以自定义名称，但需要与JavaScript代码中的【data-label】值保持一致）。

2.2 JavaScript注入

2.2.1 增加交互事件

增加交互事件，【载入时】打开链接，【超链接到】写入JavaScript代码实现GIS的引用，如下图所示：

2.2.2 JavaScript代码写入

（a）准备代码

在编辑框中加入以下代码：

（b）地图代码

然后复制高德地图的代码，并将其复制到编辑框中，修改高德key值，修改方式可以参考 lbs.amap.com/api/javasc...

2.2.3 简化代码

通过Axure内置的加载JS函数，减少动态加载JS部分的代码。$axure.utils.loadJS(url)函数说明参考

2.3 效果

点击预览，调用Chrome浏览器查看效果。