怎么利用uniapp开发一个简单的地图导航?本篇文章就来为大家提供一个制作简单地图的思路,希望对大家有所帮助!
先来看一眼效果图
简易map
在图一的地图中可以看到 a点 连接 到 b点, 基本信息 以及 基本的控件(放大、缩小、回到某个指定的点),接下来我们分开逐步讲解。
所需配置
需要先在manifest.json
中的 app模块
中配置地图,并添加相关地图的key
,如果没有可在相关开发者平台进行申请
配置好这一部分就可以开始使用map组件了
地图标记点
在uniapp map中想创建标记点就需要使用到一个属性 markers
。
我们先来看一下markers
的常用属性
名称 | 说明 | 类型 | 必填 |
---|---|---|---|
id | 标记点id | number | true |
latitude | 纬度 | number | true |
longitude | 经度 | number | true |
iconPath | 显示的图标 | string | false |
callout | 自定义标记点上方的气泡框 | Object | false |
label | 为标记点傍边增加标签 | Object | false |
查看更多请查看:
https://uniapp.dcloud.io/component/map.html
了解过这些我们就可以使用markers
属性创建标记点了, markers
属性是数组类型的,所以应该这样创建标记点
this.covers = [ { id: 1, latitude: 34.7486, longitude: 113.6709, iconPath: '../../static/shop.png', title: "目的地" } ];