自定义页面嵌入高德地图
1. 使用场景
本例介绍一下在宜搭自定义页面中如何使用高德地图。
2. 实现功能
2.1. 申请高德开放平台JSAPI Key
2.1.1. 登录高德开放平台
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1676516452584-19aba597-ec36-406c-b01b-26b606219f3a.png)
登录后点击右上角“控制台”进入控制台。
2.1.2. 账号认证
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1676516607251-b5bf6ad1-33ee-42d1-b9a6-1d95f528acb7.png)
2.1.3. 管理(创建)Key
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1676516805797-ec6ee807-3ede-4e1b-8b47-b8617965a9a5.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1676516846394-23dc66f0-7501-4339-a470-1126a66177d2.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1676516952042-a0598b1b-52ce-4505-9ce2-f503fa94f5de.png)
2.1.4. 查看创建的 Key 和 安全密钥
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686533565731-84f7cfe1-8e6a-4384-b002-c08014eeb075.png)
2.2. 配置自定义页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686552641267-d49d61b3-f0bd-49b7-9e03-db33c7d2c48a.png)
2.3. 配置 JSX 组件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686552717522-41e6b780-96ab-4017-ba45-6240eb23593d.png)
function render() {
return(
<div id='container'>
</div>
);
}
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686552619535-9318ccd1-fbc6-4a67-aca3-832ab3fe377b.png)
:root {
width: 100%;
}
#container {
height: calc(100vh - 52px);
}
.amap-icon img,
.amap-marker-content img{
width: 25px;
height: 34px;
}
.marker {
position: absolute;
top: -20px;
right: -118px;
color: #fff;
padding: 4px 10px;
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25A5F7;
border-radius: 3px;
}
2.4. 配置变量
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686553689499-1b33f499-88cf-4e83-a877-1de9d049f752.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686553700088-5163f89d-6997-4a6f-9363-afc57c661872.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686553710890-ad8b7572-bca1-4f4c-b638-a111df6d89b2.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686553721693-c958d9f9-878a-4e89-adb7-1cd6a61d2d18.png)
2.5. didMount 中引入高德地图 JSAPI
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686552911856-768ac90b-95b6-428e-9650-cd0891700a7b.png)
export async function didMount() {
const securityJsCode = '您申请的安全密钥'; // 「您申请的安全密钥」
const webKey = '您申请的Web开发者key'; // 「您申请的Web开发者key」
window._AMapSecurityConfig = {
securityJsCode,
};
await this.utils.loadScript(`https://webapi.amap.com/maps?v=2.0&key=${webKey}`)
.then(res => {
this.initMap();
});
}
2.6. 配置地图初始化函数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686553319873-9ef805a1-13c2-4fe4-9f80-a31af3481f72.png)
// 高德开放平台官网:https://lbs.amap.com
// 完整API文档:https://lbs.amap.com/api/javascript-api/guide/abc/prepare
// 插件列表:https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins-list
// 初始化地图
export function initMap() {
this.setState({
mapObject: '', // 清空地图实例
lineMarkerObject: '', // 清空轨迹回放实例
markerObjectList: [], // 清空点标记数组
lineArr: [] // 清空轨迹回放数组
});
const mapObject = new AMap.Map('container', {
zoom: 15, // 初始化地图层级
center: [116.397428, 39.90923],
viewMode: '2D', // 设置地图模式
});
AMap.plugin([
'AMap.Scale', // 比例尺控件
'AMap.HawkEye', // 鹰眼控件
'AMap.MapType', // 类别切换控件
'AMap.MoveAnimation' // 动画插件(若使用轨迹回放功能需引入)
], () => {
// 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺
mapObject.addControl(new AMap.Scale());
// 在图面添加鹰眼控件,在地图右下角显示地图的缩略图
mapObject.addControl(new AMap.HawkEye({ isOpen: true }));
// 在图面添加类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
mapObject.addControl(new AMap.MapType());
});
this.setState({
mapObject, // 保存地图实例
});
}
2.7. 配置添加或移除点标记函数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686553785224-c878a967-0a71-42b6-a914-225bb2eb1a34.png)
// 添加或移除点标记
export function onAddOrDelMarker() {
const { markerObjectList, mapObject } = this.state;
if (markerObjectList.length) {
// 移除已创建的 marker
mapObject.remove(markerObjectList);
this.setState({
markerObjectList: []
});
return;
};
const marker1 = new AMap.Marker({
position: [116.401304, 39.905374], // 经纬度数组
title: '中国国家博物馆'
});
const marker2 = new AMap.Marker({
position: [116.393823, 39.905024], // 经纬度数组
title: '人民大会堂'
});
const marker3 = new AMap.Marker({
position: [116.395174, 39.907546], // 经纬度数组
title: '长安街'
});
const marker4 = new AMap.Marker({
position: [116.394819, 39.902015], // 经纬度数组
title: '中国钱币博物馆'
});
// 多个点实例组成的数组
const markerList = [marker1, marker2, marker3, marker4];
mapObject.add(markerList);
this.setState({
markerObjectList: markerList
});
}
2.8. 配置轨迹回放初始化函数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686553871473-efc8dbb7-8f41-41f1-83f5-793c5cc99e7b.png)
// 初始化轨迹回放
export function initLinePlayBack(lineArr = []) {
const { mapObject, markerObjectList } = this.state;
if (markerObjectList.length) {
// 移除已创建的 marker
mapObject.remove(markerObjectList);
this.setState({
markerObjectList: []
});
};
this.setState({
lineMarkerObject: '', // 清空轨迹回放实例
});
const lineMarkerObject = new AMap.Marker({
map: mapObject,
position: lineArr[0],
icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
offset: new AMap.Pixel(-13, -26)
});
// 绘制轨迹
const polyline = new AMap.Polyline({
map: mapObject,
path: lineArr,
showDir: true,
strokeColor: '#28F', // 线颜色
// strokeOpacity: 1, // 线透明度
strokeWeight: 6, // 线宽
// strokeStyle: "solid" // 线样式
});
// 已通过轨迹
const passedPolyline = new AMap.Polyline({
map: mapObject,
strokeColor: '#AF5', // 线颜色
// strokeOpacity: 1, // 线透明度
strokeWeight: 6, // 线宽
// strokeStyle: "solid" // 线样式
});
lineMarkerObject.on('moving', (e) => {
passedPolyline.setPath(e.passedPath);
mapObject.setCenter(e.target.getPosition(), true);
});
mapObject.setFitView();
this.setState({
lineMarkerObject, // 保存轨迹回放实例
});
}
2.9. 配置创建轨迹回放实例函数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554032201-123ca86d-636c-4e7a-9c24-51a5653afc17.png)
// 创建轨迹回放实例
export function onInitLinePlayBack() {
const lineArr = [
[116.478935, 39.997761],
[116.478939, 39.997825],
[116.478912, 39.998549],
[116.478912, 39.998549],
[116.478998, 39.998555],
[116.478998, 39.998555],
[116.479282, 39.99856],
[116.479658, 39.998528],
[116.480151, 39.998453],
[116.480784, 39.998302],
[116.480784, 39.998302],
[116.481149, 39.998184],
[116.481573, 39.997997],
[116.481863, 39.997846],
[116.482072, 39.997718],
[116.482362, 39.997718],
[116.483633, 39.998935],
[116.48367, 39.998968],
[116.484648, 39.999861]
];
this.setState({
lineArr,
});
this.initLinePlayBack(lineArr);
}
2.10. 配置轨迹回放控制函数
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554100072-3ed4c952-2272-468e-b618-1f005abc397d.png)
// 开始轨迹回放
export function onStartLinePlayBack() {
const { lineMarkerObject, lineArr } = this.state;
lineMarkerObject.moveAlong(lineArr, {
// 每一段的时长
duration: 500, // 可根据实际采集时间间隔设置
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
autoRotation: true,
}); // 开始轨迹回放
}
// 停止轨迹回放
export function onStopLinePlayBack() {
const { lineMarkerObject } = this.state;
lineMarkerObject.stopMove(); // 停止轨迹回放
}
// 暂停轨迹回放
export function onPauseLinePlayBack() {
const { lineMarkerObject } = this.state;
lineMarkerObject.pauseMove(); // 暂停轨迹回放
}
// 继续轨迹回放
export function onResumeLinePlayBack() {
const { lineMarkerObject } = this.state;
lineMarkerObject.resumeMove(); // 继续轨迹回放
}
2.11. 事件绑定
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554146444-0e652b7f-f1c0-4b97-8314-353329cf65f8.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554159563-df433066-39fd-4937-8b09-ec617c5f4967.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554170765-fce526fd-e975-48fb-bae3-f26d452a8932.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554180969-c8de391d-b48c-4b83-91de-4980c92bea64.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554191368-a3c315fc-ac39-40a9-ae52-7bc2a28bb61b.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554201878-159800c0-72a6-45e4-9c4c-b9c851d60539.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554211809-7ee352a5-78ee-46a6-9053-83ed8c8c6306.png)
3. 实现效果
3.1. 点标记
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554323880-7f4374c4-deb0-461a-b495-bc56317374a9.png)
3.2. 轨迹回放
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1686554295675-0acced6d-1319-4a84-8a5e-06abd11e1ddf.png)
4. 在线试玩
本文档对您是否有帮助?