加油站小程序实战05舆图加载

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

在调用舆图的时候，我们需要通过API调用舆图的各类接口，起首需要注册舆图应用。打开高德舆图开放平台
   https://lbs.amap.com/
  

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

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

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

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

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

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

3 开发舆图组件

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

点击编辑JSX代码

有时候官方的组件就是这种混搭的模式，半英文半汉语的。我们需要解释一下什么是JSX，简单讲他就是JavaScript和HTML的混合体。让你可以在js中直接写html标签。
发明这种混合语法重要是为了编写代码方便。由于我们是可视化开发，不像传统开发你是在IDE里创建文件，写各种各样的代码。低代码就得按照工具厂商的设定去弄，为了开发组件的方便，官方给了这么一个可以自由发挥的组件，自己编写的时候可以按照react的语法编写。我们来看一下组件的示例代码

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

复制代码

3.1 组件语法

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

1. export default function JSX(props: JSXCompProps) {

复制代码

这个是固定的语法不消修改
第二行举行了解构赋值，我们可以从props这个对象里得到三个属性

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

复制代码

                                   w                         表示微搭的命名空间，平台封装了各种                         a                         p                         i                         供各人使用，比如想获取组件值的，我们可以通过                              w表示微搭的命名空间，平台封装了各种api供各人使用，比如想获取组件值的，我们可以通过                  w表示微搭的命名空间，平台封装了各种api供各人使用，比如想获取组件值的，我们可以通过w.id**.value获取
style表示可以获取组件样式，而contentSlot1表示可以获取组件的插槽

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

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

复制代码

这个有点类似于我们在代码区自己创建的变量，你可以修改具体的值，这里我们声明确一个count变量并且给他一个默认值是0
第五到第七行，创建了一个事件处置惩罚函数，类比于我们在代码区创建的javascript方法

1. function addCount() {
2.    setCount(count + 1);
3. }

复制代码

这个方法的作用是，每次调用的时候将我们的count的值+1
剩下的就是我们所谓的JSX的语法了，这里表示界面的定义部门，使用了HTML标签

1. return (
2.         <div style={props.style}>
3.         </div>
4.   )

复制代码

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

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

1. import React, { useRef, useEffect } from "react";
4. export default function JSX(props) {
5.     const { style } = props;
6.     const mapContainerRef = useRef(null);
9.     useEffect(() => {
10.         const loadAMap = async () => {
11.             if (!window.AMap) {
12.                 const script = document.createElement("script");
13.                 script.src = "https://webapi.amap.com/maps?v=2.0&key=替换成你自己的key";
14.                 script.async = true;
15.                 script.onload = () => initMap();
16.                 document.body.appendChild(script);
17.             } else {
18.                 initMap();
19.             }
20.         };
22.         const initMap = () => {
23.             if (mapContainerRef.current) {
24.                 const map = new window.AMap.Map(mapContainerRef.current, {
25.                     center: [116.397428, 39.90923], // 默认中心点: 可以修改为站点的经纬度坐标
26.                     zoom: 15, // 默认缩放等级
27.                     mapStyle: "amap://styles/normal", // 地图样式
28.                 });
30.                 // 创建标记点
31.                 const marker = new window.AMap.Marker({
32.                     position: [116.397428, 39.90923], // 标记位置，可以修改为站点的经纬度
33.                     offset: new window.AMap.Pixel(-13, -10), // 调整标记点偏移量
34.                     icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 替换为合适的图标
35.                 });
36.                 map.add(marker);
38.                 // 创建自定义 DOM 覆盖物
39.                 const infoContainer = document.createElement("div");
40.                 infoContainer.style.position = "absolute";
41.                 infoContainer.style.background = "#fff";
42.                 infoContainer.style.border = "1px solid #ccc";
43.                 infoContainer.style.borderRadius = "8px";
44.                 infoContainer.style.padding = "10px";
45.                 infoContainer.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.15)";
46.                 infoContainer.style.width = "200px";
47.                 infoContainer.style.transform = "translate(-50%, -100%)"; // 水平居中，垂直向上
48.                 infoContainer.style.textAlign = "center";
50.                 // 添加内容
51.                 infoContainer.innerHTML = `
52.                     <div style="display: flex; align-items: center;">
53.                         <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;" />
54.                         <div>
55.                             <div style="font-size: 14px; font-weight: bold;">内蒙古呼和浩特呼哈路站</div>
56.                             <div style="font-size: 12px; color: #888;">距您1.3km</div>
57.                         </div>
58.                     </div>
59.                 `;
61.                 // 添加到地图覆盖物
62.                 const customOverlay = new window.AMap.Marker({
63.                     position: [116.397428, 39.90923], // 覆盖物位置
64.                     content: infoContainer, // 覆盖物 DOM 节点
65.                     offset: new window.AMap.Pixel(0, -30), // 向上调整覆盖物位置
66.                 });
67.                 map.add(customOverlay);
68.             }
69.         };
71.         loadAMap();
72.     }, []);
74.     return (
75.         <div>
76.             <div
77.                 ref={mapContainerRef}
78.                 style={{
79.                     width: "100%",
80.                     height: "500px",
81.                     ...style,
82.                 }}
83.             />
84.         </div>
85.     );
86. }

复制代码

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

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

复制代码

引入React这是语法要求的，在工作的时候最终全部会转换为javascript代码，正是这个对象提供的各类api保证转换是正确的
useRef提供引用页面标签的方法，比如我们要渲染舆图的时候，我们要获取舆图的那一个层级的div
useEffect叫副作用，非常拗口，可以理解为我们页面的生命周期函数，比如我们的组件初始化的时候要调用舆图提供的api就需要在这个方法里去实现
代码的第五行创建了一个舆图组件的引用，赋值为null表示这个引用没有指向任何对象

1. const mapContainerRef = useRef(null);

复制代码

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

1. <div
2.                 ref={mapContainerRef}
3.                 style={{
4.                     width: "100%",
5.                     height: "500px",
6.                     ...style,
7.                 }}
8.             />

复制代码

我们第五行定义的引用其实就指向了这个div，以是可以把舆图组件显示到这个div里
4 最终效果

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

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。