uniapp map 制作一个简单的地图导航

最新推荐文章于 2025-09-23 13:51:51 发布

原创

最新推荐文章于 2025-09-23 13:51:51 发布 · 762 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #小程序

本文介绍了如何在uniapp中创建一个简易地图导航，包括地图配置、标记点设置、坐标连线、放大缩小功能以及导航弹框的实现。通过示例代码和注意事项，详细讲解了地图组件的关键使用方法。

本篇文章用来为大家提供一个制作简单地图的思路

先来看一眼效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P2nPNm6e-1655361944307)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/653049ac250249d2a4bc673ae479f8b7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVlnceUC-1655361944308)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7ede931c9f34e1fbbf772223913867f~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

简易map

在图一的地图中可以看到 a点连接到 b点, 基本信息以及基本的控件(放大、缩小、回到某个指定的点)，接下来我们分开逐步讲解。

所需配置

需要先在manifest.json中的 app模块中配置地图，并添加相关地图的key，如果没有可在相关开发者平台进行申请

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1eBeDf1M-1655361944308)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5411178145d401c89ff7e97f6864ec1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 配置好这一部分就可以开始使用map组件了

地图标记点

在uniapp map中想创建标记点就需要使用到一个属性 markers。

我们先来看一下markers的常用属性

名称	说明	类型	必填
id	标记点id	number	true
latitude	纬度	number	true
longitude	经度	number	true
iconPath	显示的图标	string	false
callout	自定义标记点上方的气泡框	Object	false
label