站点信息搭建完毕后，我们就可以进入到小程序部分开发了。因为是多站点管理，我们在进入小程序主页的时候需要加载地图显示所有站点信息。地图选择有多种方案，过去我是推荐使用腾讯地图，奈何腾讯地图现在不给免费额度，你也看不到效果，本篇我们使用高德地图来演示具体的效果。

1 注册地图应用

在调用地图的时候，我们需要通过API调用地图的各类接口，首先需要注册地图应用。打开高德地图开放平台

https://lbs.amap.com/

点击控制台，打开应用，点击创建应用

输入应用名称，选择应用类型

点击添加Key，选择Web端(JS API)

添加好列表上会显示key，这个在我们做组件集成的时候需要用到。

2 创建小程序

在微搭中，我们是通过创建自定义应用来搭建小程序的。打开云开发平台，点击侧边栏的可视化设计，点击创建空白应用

修改一下应用的名称，改为加油小程序

3 开发地图组件

官网的组件库里没有地图组件，需要我们使用AI代码块来开发一下，往页面中添加AI代码块

点击编辑JSX代码

有时候官方的组件就是这种混搭的模式，半英文半汉语的。我们需要解释一下什么是JSX，简单讲他就是JavaScript和HTML的混合体。让你可以在js中直接写html标签。

发明这种混合语法主要是为了编写代码方便。因为我们是可视化开发，不像传统开发你是在IDE里创建文件，写各种各样的代码。低代码就得按照工具厂商的设定去弄，为了开发组件的方便，官方给了这么一个可以自由发挥的组件，本身编写的时候可以按照react的语法编写。我们来看一下组件的示例代码

export default function JSX(props: JSXCompProps) {const { $w, style, contentSlot1 } = props;const { useState } = Reactconst [count, setCount] = useState(0);function addCount() {setCount(count + 1);}return (<div style={props.style}>语法说明：<br />1.  使用平台变量<a href="https://docs.cloudbase.net/lowcode/api/api-referrence">API文档</a><p>Hello, 我是{$w.auth.currentUser.name}<buttononClick={() => { $w.utils.showToast({ title: "操作成功" }) }}style={{ margin: "5px" }}>点击平台Toast方法</button></p>2.  插槽<p> 插槽是一个空的占位，以便拖入其他组件。</p><p> 使用插槽时，首先在【高级属性】中添加插槽声明，然后通过<span style={{ color: "red" }}>props.插槽ID</span>将插槽放入指定位置如：{props.contentSlot1}</p>点击右侧组件文档，可查看更多使用说明</div>);
}

3.1 组件语法

第一行代码表示声明了一个函数式组件

export default function JSX(props: JSXCompProps) {

这个是固定的语法不用修改

第二行进行了解构赋值，我们可以从props这个对象里得到三个属性

const { $w, style, contentSlot1 } = props;

$w表示微搭的命名空间，平台封装了各种api供大家使用，比如想获取组件值的，我们可以通过$w.id**.value获取

style表示可以获取组件样式，而contentSlot1表示可以获取组件的插槽

第三行、第四行表示react的状态管理

const { useState } = React;
const [count, setCount] = useState(0);

这个有点类似于我们在代码区自己创建的变量，你可以修改具体的值，这里我们声明了一个count变量并且给他一个默认值是0

第五到第七行，创建了一个事件处理函数，类比于我们在代码区创建的javascript方法

function addCount() {setCount(count + 1);
}

这个方法的作用是，每次调用的时候将我们的count的值+1

剩下的就是我们所谓的JSX的语法了，这里表示界面的定义部分，使用了HTML标签

return (<div style={props.style}></div>)

你可以理解为这是一个固定的结构，我们在div里创建我们的各种界面

3.2 地图组件

了解了JSX的基本语法之后，我们就来编写一下自己的地图组件的代码。

import React, { useRef, useEffect } from "react";export default function JSX(props) {const { style } = props;const mapContainerRef = useRef(null);useEffect(() => {const loadAMap = async () => {if (!window.AMap) {const script = document.createElement("script");script.src = "https://webapi.amap.com/maps?v=2.0&key=替换成你自己的key";script.async = true;script.onload = () => initMap();document.body.appendChild(script);} else {initMap();}};const initMap = () => {if (mapContainerRef.current) {const map = new window.AMap.Map(mapContainerRef.current, {center: [116.397428, 39.90923], // 默认中心点: 可以修改为站点的经纬度坐标zoom: 15, // 默认缩放等级mapStyle: "amap://styles/normal", // 地图样式});// 创建标记点const marker = new window.AMap.Marker({position: [116.397428, 39.90923], // 标记位置，可以修改为站点的经纬度offset: new window.AMap.Pixel(-13, -10), // 调整标记点偏移量icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 替换为合适的图标});map.add(marker);// 创建自定义 DOM 覆盖物const infoContainer = document.createElement("div");infoContainer.style.position = "absolute";infoContainer.style.background = "#fff";infoContainer.style.border = "1px solid #ccc";infoContainer.style.borderRadius = "8px";infoContainer.style.padding = "10px";infoContainer.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.15)";infoContainer.style.width = "200px";infoContainer.style.transform = "translate(-50%, -100%)"; // 水平居中，垂直向上infoContainer.style.textAlign = "center";// 添加内容infoContainer.innerHTML = `<div style="display: flex; align-items: center;"><img src="https://lowcode-5gjsvmcpbf91914b-1256989349.tcloudbaseapp.com/resources/2025-02/lowcode-2122198" alt="icon" style="width: 50px; height: 50px; border-radius: 4px; margin-right: 10px;" /><div><div style="font-size: 14px; font-weight: bold;">内蒙古呼和浩特呼哈路站</div><div style="font-size: 12px; color: #888;">距您1.3km</div></div></div>`;// 添加到地图覆盖物const customOverlay = new window.AMap.Marker({position: [116.397428, 39.90923], // 覆盖物位置content: infoContainer, // 覆盖物 DOM 节点offset: new window.AMap.Pixel(0, -30), // 向上调整覆盖物位置});map.add(customOverlay);}};loadAMap();}, []);return (<div><divref={mapContainerRef}style={{width: "100%",height: "500px",...style,}}/></div>);
}

代码的第一行我们从react库里导入了一个对象和两个方法

import React, { useRef, useEffect } from "react";

引入React这是语法要求的，在工作的时候最终全部会转换为javascript代码，正是这个对象提供的各类api保证转换是正确的

useRef提供引用页面标签的方法，比如我们要渲染地图的时候，我们要获取地图的那一个层级的div

useEffect叫副作用，非常拗口，可以理解为我们页面的生命周期函数，比如我们的组件初始化的时候要调用地图提供的api就需要在这个方法里去实现

代码的第五行创建了一个地图组件的引用，赋值为null表示这个引用没有指向任何对象

const mapContainerRef = useRef(null);

从代码的第七行，你可以理解为我们编写了加载地图的方法，总体思路是先调用地图的api，把底图加载出来，然后我们给我们的站点通过经纬度用一个水滴的图标显示出来，接着给水滴定义一个弹窗，用来显示站点的名称、图片和距你多少公里

地图组件在哪里显示呢？就是在我们的return语句里的div

<divref={mapContainerRef}style={{width: "100%",height: "500px",...style,}}/>

我们第五行定义的引用其实就指向了这个div，所以可以把地图组件显示到这个div里

4 最终效果

把这个代码贴入到我们的JSX组件后，就可以看到高德地图正确加载到，并且显示了我们站点的信息

总结

我们本篇介绍了JSX组件的语法，并且结合我们的小程序，解释了如何用JSX组件来加载地图。有时候低代码工具有自己产品的规划，不见得常见的场景愿意给做。在他不愿意做的时候，使用JSX组件就是最终的可行解决方案。当然了要想做出来，就需要对各类技术栈有一个充分的了解才行，这也是大家普遍诟病低代码不容易上手的地方。