Axure做原型时也会常引用Gis地图。常规的方法是通过内联框架元件调用公网地图，但是这种方式样式下的地图内容都无法修改。本文以高德为例介绍如何通过javascript注入实现Axure自定义Gis地图的嵌入。

1、地图构建

打开高德地图API官网，由于通过js注入的方式进行嵌入。所以选取了异常加载地图方式，这样加载可以更加顺畅。示例地址https://lbs.amap.com/demo/javascript-api/example/map-lifecycle/asynchronous-loading-map ，可以在此基础上加上想要的功能。

2、Axure 引用

以Axure8为例。

2.1 创建容器

在axure界面里拖入矩形，作为地图容器，并命名为“container” （可以自己定义名称，但要与javascript代码【data-label】里的值保持一致)。

2.2 javascript注入

2.2.1 增加交互事件

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

2.2.2 javascrit代码写入

a 准备代码

编辑框加入

javascript:
var dom =$('[data-label=container]').attr('id');

b 地图代码

然后复制高德地图的代码复制进去，修改高德key值,修改方式可以参考https://lbs.amap.com/api/javascript-api/guide/abc/prepare

javascript:
var dom =$('[data-label=container]').attr('id');
/*高德地图的代码*/
    function onApiLoaded(){
        var map = new AMap.Map(dom , {
            center: [117.000923, 36.675807],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
    }
     var url = 'https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=onApiLoaded';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);

c 简化代码

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

javascript:
var dom = $('[data-label=container]').attr('id'); /*高德地图的代码*/ function onApiLoaded(){ var map = new AMap.Map(dom , { center: [117.000923, 36.675807], zoom: 6 }); map.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar()); }); }$ axure.utils.loadJS('https://webapi.amap.com/maps?v=1.4.15&key=你的key&callback=onApiLoaded');