2

CIMPro 中自定义方式高德地图的使用

2025-12-26 17:58:38
129 次阅读
3 个评论
最后修改时间:2025-12-26 18:10:00

1. 新建一个文本组件,调整组件大小用来作为地图的展示区域,点击编辑高级事件

2. 在渲染之后的编辑器中输入以下代码,红框标记为需要替换的组件 id

3. 将当前组件的 id 放入事件中,进行替换,保存,地图即可正常展示

4. 此处的 url 为高德地图官方 API JS 引用,需要将此处的 key 替换为自己在高德开发平

台申请的 key 值



5. 高德开放平台的申请 Key 如图所示,需要选择 Web 端(JS API)


0 赞
0 收藏
评论
  1. 2025-12-27 16:24:13
    您图片里的示例代码可以贴出来吗 ?
  2. 2026-01-24 16:54:43
    // 异步加载
    window.onLoad = function() {
    
        // 3ml18y是加载地图的容器id
        var map = new AMap.Map('3ml18y', {
            viewMode: '2D',        // 默认使用2D地图
            zoom: 13,              // 初始化缩放级别
            center: [121.312785,31.209102], // 初始化中心点
            mapStyle: "amap://styles/dark", // 主题色设置
        });
        
        // 添加标记
        var marker = new AMap.Marker({
            position: [121.312785,31.209102],
            title: '上海漂视网络'
        });
        map.add(marker);
        
        // 添加信息窗口
        var infoWindow = new AMap.InfoWindow({
            content: '<div style="padding:10px">上海漂视网络</div>',
            offset: new AMap.Pixel(0, -30)
        });
        infoWindow.open(map, marker.getPosition());
    }
    var url = 'https://webapi.amap.com/maps?v=2.0&key=caab914ee7c82a8e37f418b08b7fca48&callback=onLoad';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
共 2 条
  • 1
前往

请登录后回答。没有帐号?注册一个。