VTJ.PRO AI + 低代码实战：接入高德地图

踩着两条虫
0 阅读3分钟

高德地图准备

  1. 成为高德地图开发者并创建 Key
    访问 高德开放平台控制台，若尚未注册开发者账号，请先点击注册并完成实名认证（个人或企业均可）。登录后进入控制台。

  2. 创建 Key
    在控制台左侧导航栏选择「应用管理」，点击「创建新应用」。填写应用名称、类型等基本信息后，点击「新建应用」。进入应用详情页，点击「添加 Key」，服务平台务必选择 Web端（JS API），其他字段按需填写，提交后即可生成 Key。

  3. 获取 Key 和安全密钥
    创建成功后，列表中会显示该 Key 的 Key 值（即 key）和 安全密钥（securityJsCode）。请妥善保存这两个值，后续初始化地图时会用到。

💡 安全密钥用于防止 Key 被非法滥用，建议在生产环境中开启 IP 白名单或 Referer 校验。

设置高德地图依赖

在 VTJ.PRO 设计器中，打开右侧「依赖管理」面板，点击 + 按钮添加高德地图 JS API 依赖。参照以下配置填写：

字段值
包名@amap/amap-jsapi-loader
版本1.0.1
导出名称AMapLoader
资源文件https://webapi.amap.com/loader.js

📌 该依赖会异步加载高德地图的 JS API，并提供 Promise 风格的 load() 方法，便于在 Vue 生命周期中调用。

image.png

地图初始化

  1. 拖拽容器元素
    从组件库拖拽一个 <div> 到设计器画布，在右侧属性面板中设置其高度为 100vh（或具体像素值，如 600px），并添加 ref 属性，值为 container。该 div 将作为地图的挂载容器。

  2. 在生命周期 mounted 中添加初始化代码
    选中当前页面组件，在「生命周期」选项卡中找到 mounted 钩子，点击编辑图标。将以下代码粘贴到弹出的代码编辑器中：

// 配置安全密钥（防止 Key 被滥用）
window._AMapSecurityConfig = {
  securityJsCode: "这里填写你申请到的安全密钥", 
};

// 加载高德地图并创建实例
this.$libs.AMapLoader.load({
  key: "这里填写你申请到的 Web 端 Key", // 必填
  version: "2.0",      // 可选，指定 JS API 版本
  plugins: []          // 可选，需要额外加载的插件列表
}).then((AMap) => {
  // 创建地图实例，挂载到 ref 为 container 的 DOM 元素上
  const map = new AMap.Map(this.$refs.container, {
    zoom: 11,          // 初始化地图层级
    center: [116.397428, 39.90923], // 初始化地图中心点（北京天安门）
    viewMode: '3D'     // 可选，3D 视图模式
  });
  console.log("地图初始化成功", map);
}).catch((e) => {
  console.error("地图加载失败", e);
});

⚠️ 注意：this.$libs.AMapLoader 对应依赖管理中填写的导出名称。代码中的 key 和 securityJsCode 需要替换成你自己的真实值。

893db8cd-8526-4974-a67a-e881f9d808ac.png

应用示例：通过 AI 生成演示案例

VTJ.PRO 内置了 AI 编程助手，你可以通过自然语言快速生成完整的地图交互页面。在 AI 对话框中输入以下提示词：

在当前页面开发一个高德地图的应用演示案例

AI 会自动为你生成包含地图容器、初始化代码以及常用交互（如添加标记、缩放控件、获取当前位置等）的完整页面代码。生成后可直接预览或进一步调整。

生成效果示例（点击即可运行）：

image.png

参考资料

VTJ.PRO 是一个开源的、AI 驱动的 Vue 3 企业级应用开发平台。它通过 AI 智能体与可视化编排实现高效开发，并支持导出标准 Vue 代码以避免平台锁定。更多信息请访问：

avatar
文章
阅读
粉丝