加油站小程序实战05舆图加载
站点信息搭建完毕后，我们就可以进入到小程序部门开发了。由于是多站点管理，我们在进入小程序主页的时候需要加载舆图显示全部站点信息。舆图选择有多种方案，过去我是保举使用腾讯舆图，奈何腾讯舆图现在不给免费额度，你也看不到效果，本篇我们使用高德舆图来演示具体的效果。1 注册舆图应用
在调用舆图的时候，我们需要通过API调用舆图的各类接口，起首需要注册舆图应用。打开高德舆图开放平台
https://lbs.amap.com/
https://i-blog.csdnimg.cn/direct/1d57fb31d606493fa19419020209b6c8.png
点击控制台，打开应用，点击创建应用
https://i-blog.csdnimg.cn/direct/0e79ca880f624700b02bca69bacd53e4.png
输入应用名称，选择应用类型
https://i-blog.csdnimg.cn/direct/c429fa187a5f43bfab3347685711ac6c.png
点击添加Key，选择Web端(JS API)
https://i-blog.csdnimg.cn/direct/81100fcd1dac483fbb6ccfb0083e4ae0.png
添加好列表上会显示key，这个在我们做组件集成的时候需要用到。
2 创建小程序
在微搭中，我们是通过创建自定义应用来搭建小程序的。打开云开发平台，点击侧边栏的可视化计划，点击创建空白应用
https://i-blog.csdnimg.cn/direct/77ede69d24bf4015b77831eb5d19c2bf.png
修改一下应用的名称，改为加油小程序
https://i-blog.csdnimg.cn/direct/58e536e6b04c4987954830a99fcfc490.png
3 开发舆图组件
官网的组件库里没有舆图组件，需要我们使用AI代码块来开发一下，往页面中添加AI代码块
https://i-blog.csdnimg.cn/direct/4d163def3e384ed98ce84ce488462017.png
点击编辑JSX代码
https://i-blog.csdnimg.cn/direct/db6305280b6c4b688a6a29f3ba1813e8.png
有时候官方的组件就是这种混搭的模式，半英文半汉语的。我们需要解释一下什么是JSX，简单讲他就是JavaScript和HTML的混合体。让你可以在js中直接写html标签。
发明这种混合语法重要是为了编写代码方便。由于我们是可视化开发，不像传统开发你是在IDE里创建文件，写各种各样的代码。低代码就得按照工具厂商的设定去弄，为了开发组件的方便，官方给了这么一个可以自由发挥的组件，自己编写的时候可以按照react的语法编写。我们来看一下组件的示例代码
export default function JSX(props: JSXCompProps) {
const { $w, style, contentSlot1 } = props;
const { useState } = React
const = 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}
<button
onClick={() => { $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 表示微搭的命名空间，平台封装了各种 a p i 供各人使用，比如想获取组件值的，我们可以通过 w表示微搭的命名空间，平台封装了各种api供各人使用，比如想获取组件值的，我们可以通过 w表示微搭的命名空间，平台封装了各种api供各人使用，比如想获取组件值的，我们可以通过w.id**.value获取
style表示可以获取组件样式，而contentSlot1表示可以获取组件的插槽
https://i-blog.csdnimg.cn/direct/b3bb5bb14639498baf16ff14370170b5.png
第三行、第四行表示react的状态管理
const { useState } = React;
const = 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: , // 默认中心点: 可以修改为站点的经纬度坐标
zoom: 15, // 默认缩放等级
mapStyle: "amap://styles/normal", // 地图样式
});
// 创建标记点
const marker = new window.AMap.Marker({
position: , // 标记位置，可以修改为站点的经纬度
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: , // 覆盖物位置
content: infoContainer, // 覆盖物 DOM 节点
offset: new window.AMap.Pixel(0, -30), // 向上调整覆盖物位置
});
map.add(customOverlay);
}
};
loadAMap();
}, []);
return (
<div>
<div
ref={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
<div
ref={mapContainerRef}
style={{
width: "100%",
height: "500px",
...style,
}}
/>
我们第五行定义的引用其实就指向了这个div，以是可以把舆图组件显示到这个div里
4 最终效果
把这个代码贴入到我们的JSX组件后，就可以看到高德舆图正确加载到，并且显示了我们站点的信息
https://i-blog.csdnimg.cn/direct/a3c46ecec00b479e857ef63a1eb3d5e2.png
总结
我们本篇先容了JSX组件的语法，并且结合我们的小程序，解释了如何用JSX组件来加载舆图。有时候低代码工具有自己产物的规划，不见得常见的场景愿意给做。在他不肯意做的时候，使用JSX组件就是最终的可行解决方案。当然了要想做出来，就需要对各类技能栈有一个充实的了解才行，这也是各人普遍诟病低代码不轻易上手的地方。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]