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

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

先来看一眼效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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	为标记点傍边增加标签	Object	false