加油站小程序实战05地图加载
目录
- 1 注册地图应用
- 2 创建小程序
- 3 开发地图组件
- 3.1 组件语法
- 3.2 地图组件
- 4 最终效果
- 总结
站点信息搭建完毕后，我们就可以进入到小程序部分开发了。因为是多站点管理，我们在进入小程序主页的时候需要加载地图显示所有站点信息。地图选择有多种方案，过去我是推荐使用腾讯地图，奈何腾讯地图现在不给免费额度，你也看不到效果，本篇我们使用高德地图来演示具体的效果。
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 } = React
const [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}
<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表示可以获取组件的插槽
第三行、第四行表示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>
<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组件后，就可以看到高德地图正确加载到，并且显示了我们站点的信息
总结
我们本篇介绍了JSX组件的语法，并且结合我们的小程序，解释了如何用JSX组件来加载地图。有时候低代码工具有自己产品的规划，不见得常见的场景愿意给做。在他不愿意做的时候，使用JSX组件就是最终的可行解决方案。当然了要想做出来，就需要对各类技术栈有一个充分的了解才行，这也是大家普遍诟病低代码不容易上手的地方。