这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

先上效果

简易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属性是数组类型的,所以应该这样创建标记点

  1. this.covers = [
  2. {
  3. id: 1,
  4. latitude: 34.7486,
  5. longitude: 113.6709,
  6. iconPath: '../../static/shop.png',
  7. title: "目的地"
  8. }
  9. ];

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

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

挂载

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

坐标连线

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

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

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

平台差异请点击查看

这里我们要注意 两个坑,作者亲踩

  1. polyline 属性是一个数组

    polyline 之所以是一个数组是因为他可以同时创建多条线并且连线,每条线还可以有着不同的颜色、箭头、图标等。

  2. points 也是一个数组

    points之所以是一个数组是因为他要确定某一条线上的每一个点,且每个点都应该由经纬度构成

所以 polyline 的正确写法应该是这样的

  1. // 连线
  2. this.polyline = [
  3. // 第一条线
  4. {
  5. // 每个点的经纬度
  6. points: [{34.7486, 113.6709}, {28.7486, 113.6709}],
  7. // 颜色
  8. color: "#000",
  9. // 宽度
  10. width: 10
  11. }
  12. ]

如果想添加第二条线仅仅只需要在 polyline 中在添加一个 Object。 挂载

  1. <map :polyline="polyline"></map>

放大缩小

map 的放大缩依赖于 scale 属性 所以只需要动态改变 scale 属性的值就可以了。 但这里要注意 scale 的取值范围为 3~20,数字类型

这就是放大缩小功能的依赖

回到指定位置

想要地图回到指定的位置也非常简单,只需要使用 uni.createMapContext() 方法创建一个 mapContent 对象 在使用 附带的 moveToLocatio 方法便可让地图回到指定的位置。

导航弹框

图二中的地图应用选择弹框则是使用了 h5Plus

nativeUI.actionSheet 方法 创建了弹框

runtime.openURL 方法 打开了 导航软件 或 h5 页面导航

nativeUI情请点击这里查看

runtime情请点击这里查看

  1. // 导航 会打开导航菜单供用户选择
  2. openNavigation(longitude, latitude, name) {
  3. let url = ""; // app url
  4. let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
  5. plus.nativeUI.actionSheet({ //选择菜单
  6. title: "选择地图应用",
  7. cancel: "取消",
  8. buttons: [{title: "高德地图"}] // 可选的地图类型
  9. }, (e)=> {
  10. // 判断用户选择的地图
  11. switch (e.index) {
  12. //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
  13. case 1:
  14. // 安卓
  15. if(plus.os.name == "Android") {
  16. url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
  17. }else {
  18. url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
  19. }
  20. webUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
  21. break;
  22. }
  23. // 如果选中
  24. if (url != "") {
  25. url = encodeURI(url);
  26. // 打开 app 导航
  27. plus.runtime.openURL(url, (err)=>{ // 失败回到
  28. // 如果失败则说明未安装 直接 打开网页版进行导航
  29. // 毕竟用户可能没有安装app但一定安装的有浏览器
  30. plus.runtime.openURL(webUrl);
  31. });
  32. }
  33. })
  34. }

这就是我导航弹窗实现的逻辑了, 这里我仅仅只是用了高德地图的选项,大家可以根据需要增加相应地图app,其他常见的我放在下方了。

腾讯

app url

  1. let appUrl = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${腾讯地图key}`

web url

  1. let webUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:经度,纬度;title:名称;addr:地址&referer=myapp`

百度

app url

  1. let appUrl = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`

web url

  1. let webUrl = `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${content}&output=html&src=webapp.baidu.openAPIdemo`

本文转载于:

https://juejin.cn/post/7092055240270151717

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--uniapp map 制作一个简单的地图导航的更多相关文章

  1. 实例学习SSIS(一)--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  2. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

  3. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  4. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  5. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  6. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

  7. 自己制作一个简单的操作系统二[CherryOS]

    自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...

  8. 实现一个简单的侧边导航Winform程序框架

    目录 简介 实现导航面板 实现方法 使用方法 实现标题栏 窗体拖拽及最大化 自定义窗体按钮 标题显示 按钮设置 实现状态栏 整体使用 参考文章 简介 每次新项目都要想着界面怎么设计好,但想来想去上位机 ...

  9. Expression Blend4经验分享:制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  10. C#-用Winform制作一个简单的密码管理工具

    为什么要做? 首先是为了练习一下c#. 想必大家都有过记不起某个平台的账号密码的经历,那种感受着实令人抓狂.那这么多账号密码根本记不住!我之前用python写过一个超级简单(连账号信息都写在代码里那种 ...

随机推荐

  1. JS实现一个布隆过滤器

    之前专门聊过令牌桶算法,而类似的方案还有布隆过滤器.它一般用于高效地查找一个元素是否在一个集合中. 用js实现如下所示: class BloomFilter { constructor(size, h ...

  2. NC20960 迪拜的超市

    题目链接 题目 题目描述 forever97家住迪拜一环,因此有很多大大小小的商场. 迪拜一环有n个超市,分别在坐标轴[1,n]位置,forever97家在0这个位置. 由于日常开销巨大,所以Trot ...

  3. 【Unity3D】动画回调函数、动画事件、动画曲线

    1 动画回调函数 ​ 动画回调函数是指动画在开始时.执行中.结束时回调的函数,主要有:OnStateEnter.OnStateUpdate.OnStateExit.OnStateMove.OnStat ...

  4. Java集合框架学习(十二) Arrays类详解

    声明:部分内容参考自:https://liuyanzhao.com/2863.html Arrays类介绍 这个类包含了用于操作数组的各种方法,诸如:排序和搜索. 这个类还包含一个静态方法asList ...

  5. mdbook安装使用实录

    简介 mdbook是一个基于Rust的电子书系统,效果类似于gitbook.本人写图文文章一直都采用的印象笔记,但是写系列教程的情况不方便管理.因此引入mdBook,分享一下基本安装使用过程及遇到的问 ...

  6. [BUUCTF][Web][极客大挑战 2019]LoveSQL 1

    打开靶机url,页面显示有两个输入框,框中输入123',发现两个框都有sql注入问题 爆出一下错误 You have an error in your SQL syntax; check the ma ...

  7. geacon_pro配合catcs4.5上线Mac、Linux

    最新最全文章见我个人博客: xzajyjs.cn 一些链接 Try师傅的catcs4.5项目: https://github.com/TryGOTry/CobaltStrike_Cat_4.5,最新版 ...

  8. 任务系统之API子任务

    日常运维工作中有许多的任务要执行,例如项目发布/数据备份/定时巡检/证书更新/漏洞修复等等,大部分的任务都会有多个步骤共同完成,例如一个发布任务会有拉代码.编译.分发.通知等等步骤,而不同的任务可能还 ...

  9. 在ABP的模块解决方案中使用BootstrapBlazor

    1.为Study.Trade.Blazor.Server.Host引入两个包 成功后效果如下: 2.修改Study.Trade.Blazor.Server.Host的Pages目录下的_Host.cs ...

  10. 标准差为什么除以n-1

    参考:https://blog.csdn.net/qian2213762498/article/details/80558018 如果要测量中国人的平均身高,假设为μ,通常会随机取假设10000人,求 ...