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

置顶

喵十一点半

已于 2022-05-01 08:49:42 修改

阅读量7.7k

点赞数 9

分类专栏： uniapp 教程文章标签： uni-app 前端 javascript js

于 2022-04-30 00:15:31 首次发布

本文链接： https://blog.csdn.net/qq_43402051/article/details/124506948

版权

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

先来看一眼效果图

简易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

查看更多请点击这里

了解过这些我们就可以使用markers属性创建标记点了, markers属性是数组类型的，所以应该这样创建标记点

    this.covers = [ 
        {
   
            id: 1,
            latitude: 34.7486,
            longitude: 113.6709,
            iconPath: '../../static/shop.png',
            title: "目的地"
        }
    ];

如果想添加更多的标记点就可以继续在数组中添加object，

每个object都代表了一个标记点

挂载

    <map :markers="covers"></map>

坐标连线

想让我们的坐标连线就需要使用到 polyline 属性。

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

名称	说明	类型	必填
points	经纬度数组	Array	true
color	线的颜色	string	false
width	线宽	Number	false
iconPath	显示的图标	string	false
arrowLine	带箭头的线	Boolean	false
colorList	彩虹显	Array	false