记录--uniapp map 制作一个简单的地图导航
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
先上效果
简易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 |
这里我们要注意 两个坑,作者亲踩
polyline
属性是一个数组polyline
之所以是一个数组是因为他可以同时创建多条线并且连线,每条线还可以有着不同的颜色、箭头、图标等。points
也是一个数组points
之所以是一个数组是因为他要确定某一条线上的每一个点,且每个点都应该由经纬度构成
所以 polyline
的正确写法应该是这样的
- // 连线
- this.polyline = [
- // 第一条线
- {
- // 每个点的经纬度
- points: [{34.7486, 113.6709}, {28.7486, 113.6709}],
- // 颜色
- color: "#000",
- // 宽度
- width: 10
- }
- ]
如果想添加第二条线仅仅只需要在 polyline
中在添加一个 Object
。 挂载
- <map :polyline="polyline"></map>
放大缩小
map
的放大缩依赖于 scale
属性 所以只需要动态改变 scale
属性的值就可以了。 但这里要注意 scale
的取值范围为 3~20,数字类型
这就是放大缩小功能的依赖
回到指定位置
想要地图回到指定的位置也非常简单,只需要使用 uni.createMapContext()
方法创建一个 mapContent 对象 在使用 附带的 moveToLocatio
方法便可让地图回到指定的位置。
导航弹框
图二中的地图应用选择弹框则是使用了 h5Plus
的
nativeUI.actionSheet
方法 创建了弹框
runtime.openURL
方法 打开了 导航软件 或 h5 页面导航
- // 导航 会打开导航菜单供用户选择
- openNavigation(longitude, latitude, name) {
- let url = ""; // app url
- let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
- plus.nativeUI.actionSheet({ //选择菜单
- title: "选择地图应用",
- cancel: "取消",
- buttons: [{title: "高德地图"}] // 可选的地图类型
- }, (e)=> {
- // 判断用户选择的地图
- switch (e.index) {
- //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
- case 1:
- // 安卓
- if(plus.os.name == "Android") {
- url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
- }else {
- url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
- }
- webUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
- break;
- }
- // 如果选中
- if (url != "") {
- url = encodeURI(url);
- // 打开 app 导航
- plus.runtime.openURL(url, (err)=>{ // 失败回到
- // 如果失败则说明未安装 直接 打开网页版进行导航
- // 毕竟用户可能没有安装app但一定安装的有浏览器
- plus.runtime.openURL(webUrl);
- });
- }
- })
- }
这就是我导航弹窗实现的逻辑了, 这里我仅仅只是用了高德地图的选项,大家可以根据需要增加相应地图app,其他常见的我放在下方了。
腾讯
app url
- let appUrl = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${腾讯地图key}`
web url
- let webUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:经度,纬度;title:名称;addr:地址&referer=myapp`
百度
app url
- let appUrl = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
web url
- 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 制作一个简单的地图导航的更多相关文章
- 实例学习SSIS(一)--制作一个简单的ETL包
原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...
- PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例
前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...
- TensorFlow练习13: 制作一个简单的聊天机器人
现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...
- 手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
- 如何使用AEditor制作一个简单的H5交互页demo
转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...
- 制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1. 对指定文件夹下所有JPG文件进行预览2. 对选定图片进行旋转3. 对选定图片 ...
- 自己制作一个简单的操作系统二[CherryOS]
自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...
- 实现一个简单的侧边导航Winform程序框架
目录 简介 实现导航面板 实现方法 使用方法 实现标题栏 窗体拖拽及最大化 自定义窗体按钮 标题显示 按钮设置 实现状态栏 整体使用 参考文章 简介 每次新项目都要想着界面怎么设计好,但想来想去上位机 ...
- Expression Blend4经验分享:制作一个简单的图片按钮样式
这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...
- C#-用Winform制作一个简单的密码管理工具
为什么要做? 首先是为了练习一下c#. 想必大家都有过记不起某个平台的账号密码的经历,那种感受着实令人抓狂.那这么多账号密码根本记不住!我之前用python写过一个超级简单(连账号信息都写在代码里那种 ...
随机推荐
- JS实现一个布隆过滤器
之前专门聊过令牌桶算法,而类似的方案还有布隆过滤器.它一般用于高效地查找一个元素是否在一个集合中. 用js实现如下所示: class BloomFilter { constructor(size, h ...
- NC20960 迪拜的超市
题目链接 题目 题目描述 forever97家住迪拜一环,因此有很多大大小小的商场. 迪拜一环有n个超市,分别在坐标轴[1,n]位置,forever97家在0这个位置. 由于日常开销巨大,所以Trot ...
- 【Unity3D】动画回调函数、动画事件、动画曲线
1 动画回调函数 动画回调函数是指动画在开始时.执行中.结束时回调的函数,主要有:OnStateEnter.OnStateUpdate.OnStateExit.OnStateMove.OnStat ...
- Java集合框架学习(十二) Arrays类详解
声明:部分内容参考自:https://liuyanzhao.com/2863.html Arrays类介绍 这个类包含了用于操作数组的各种方法,诸如:排序和搜索. 这个类还包含一个静态方法asList ...
- mdbook安装使用实录
简介 mdbook是一个基于Rust的电子书系统,效果类似于gitbook.本人写图文文章一直都采用的印象笔记,但是写系列教程的情况不方便管理.因此引入mdBook,分享一下基本安装使用过程及遇到的问 ...
- [BUUCTF][Web][极客大挑战 2019]LoveSQL 1
打开靶机url,页面显示有两个输入框,框中输入123',发现两个框都有sql注入问题 爆出一下错误 You have an error in your SQL syntax; check the ma ...
- geacon_pro配合catcs4.5上线Mac、Linux
最新最全文章见我个人博客: xzajyjs.cn 一些链接 Try师傅的catcs4.5项目: https://github.com/TryGOTry/CobaltStrike_Cat_4.5,最新版 ...
- 任务系统之API子任务
日常运维工作中有许多的任务要执行,例如项目发布/数据备份/定时巡检/证书更新/漏洞修复等等,大部分的任务都会有多个步骤共同完成,例如一个发布任务会有拉代码.编译.分发.通知等等步骤,而不同的任务可能还 ...
- 在ABP的模块解决方案中使用BootstrapBlazor
1.为Study.Trade.Blazor.Server.Host引入两个包 成功后效果如下: 2.修改Study.Trade.Blazor.Server.Host的Pages目录下的_Host.cs ...
- 标准差为什么除以n-1
参考:https://blog.csdn.net/qian2213762498/article/details/80558018 如果要测量中国人的平均身高,假设为μ,通常会随机取假设10000人,求 ...