### [Axure嵌入GIS地图](https://pmself.com/article/1727)

**Published:** 2022-11-29T04:50:03

**Author:** crawlpw

**Excerpt:** Axure做原型时也会常引用Gis地图。常规的方法是通过内联框架元件调用公网地图，但是这种方式样式下的地图内容…

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

## 1、地图构建

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

![](https://pic1.zhimg.com/80/v2-8b012729150595d2d26e8e14a92851e0_720w.webp)

## 2、Axure 引用

### 2.1 创建容器

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

![](https://pic1.zhimg.com/80/v2-92abb623cd3e9cbfd54f73d8997b95d4_720w.webp)

### 2.2 javascript注入

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

![](https://pic3.zhimg.com/80/v2-9f25ff3771363f75b66a4377c7df04b6_720w.webp)

  
**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](https://link.zhihu.com/?target=https%3A//lbs.amap.com/api/javascript-api/guide/abc/prepare)

![](https://pic4.zhimg.com/80/v2-6f5ec2a98c4a4f91fea4e638256f442f_720w.webp)

```
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/](https://link.zhihu.com/?target=https%3A//www.sima.link/axure-api-load-js-css/)

###   
2.3 效果

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

![](https://pic3.zhimg.com/80/v2-d850e18f5bdda7c8a03e839838209f76_720w.webp)

转载知乎：[https://zhuanlan.zhihu.com/p/543176914](https://zhuanlan.zhihu.com/p/543176914)

**Tags:** Axure嵌入GIS地图

**Categories:** Axure

---