分类： Axure

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

1、地图构建

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

2、Axure 引用

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 简化代码

javascript:
var dom ==axure("@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');

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

2.3 效果

点击预览调用chrome浏览器查看效果

转载知乎：https://zhuanlan.zhihu.com/p/543176914