app uniapp 获取位置_uniApp 地图使用
uniApp 地图使用
2、地图分显示,和获取定位两部分;显示可选择腾讯地图、高德地图、百度地图
3、获取定位方法由 uniApp 提供,坐标为固定的 gcj02、即使设置类型 wgs84,也是得到 gcj02 坐标
创建地图
onReady() {
let vm = this
vm.map = uni.createMapContext('map2', this)
vm.getLocation()
},
methods: {
//获取定位
getLocation() {
let vm = this
uni.getLocation({
type: 'gcj02',
geocode: true,//获取城市具体地址
success: (e) => {
if (e.address.city) {
vm.cityName = e.address.city
vm.poiName = e.address.poiName
vm.moveToLocation()
}
vm.latitude = e.latitude
vm.longitude = e.longitude
vm.run = 'start'
vm.addDingwei()
},
fail: (e) => {
vm.longitude = 113.953834 //e.longitude
vm.latitude = 22.540235 //e.latitude
vm.run = 'start'
vm.addDingwei()
},
})
},
//移动到指定位置
moveToLocation() {
let vm = this
let falg = Object.keys(vm.map).length
if (falg) {
vm.map.moveToLocation({
longitude: vm.longitude,
latitude: vm.latitude,
success: () => {}
})
}
},
//添加定位点
addDingwei() {
let vm = this,arr = [];
arr.push({
id: 0,
latitude: vm.latitude,
longitude: vm.longitude,
iconPath: '../../static/dingwei.png',
callout: {
content: '删除此站点', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 2, //边框圆角
bgColor: '#00c16f', //背景颜色
display: 'BYCLICK', //点击显示
},
})
vm.markers = arr
},
//点击控件
controltap(e) {
let vm = this
if (e.detail.controlId === 0) {
vm.getLocation()
}
if (e.detail.controlId === 1) {
uni.chooseLocation({
success: (e) => {
vm.getLine(e)
}
})
}
},
//移动地图位置触发获取地图中心店坐标
regionchange(e) {
let vm = this
if (e.type != 'begin' && vm.run == 'start') {
vm.getCenterLocation()
}
},
}
唤醒第三方地图
//引入插件
import Map from '@/js_sdk/fx-openMap/openMap.js'
//既有起点也有终点
var options = {
origin: { //导航起点坐标和名称,如果不传则起点为当前位置
latitude: vm.latitude,
longitude: vm.longitude,
name: "大冲商务中心C座"
},
destination: { //导航终点点坐标和名称
latitude: item.latitude,
longitude: item.longitude,
name: item.name
},
mode: "drive" //导航方式 公交:bus驾车:drive(默认),步行:walk,骑行:bike
}
//只有有终点(起点默认为当前位置)
var options = {
destination: { //导航终点点坐标和名称
latitude: item.latitude,
longitude: item.longitude,
name: item.name
},
mode: "drive" //导航方式 公交:bus驾车:drive(默认),步行:walk,骑行:bike
}
Map.openMap(options, 'gcj02')
app 端生成导航线路
//引入插件
import Amap from '../../js_sdk/Lyn4ever-gaodeRoutePlanning/lyn4ever-gaode.js';
//搜索路线
getLine(item) {
let vm = this
let latitude = JSON.stringify(vm.latitude).slice(0, 9),
longitude = JSON.stringify(vm.longitude).slice(0, 10);
let startPoi = longitude + ',' + latitude;
let wayPoi = "";
let endPoi = item.longitude + ',' + item.latitude;
vm.polyline = []
if (window === undefined) {
Amap.line(startPoi, endPoi, wayPoi, function(res) {
vm.polyline.push(res)
});
Amap.markers(startPoi, endPoi, wayPoi, function(res) {
vm.markers = res
});
} else {
window.open('https://map.baidu.com/')
}
},
阶段总结
1,运行环境判断 window === undefined?“app”:“h5”
2,变量样式获取使用 :style="mapStyle"||:style="coverView()"
3,造轮子之前,先查看插件库,研究研究
app uniapp 获取位置_uniApp 地图使用相关推荐
- 微信小程序开发:获取位置打开地图
目录 01 准备工作 02 小程序基础知识 微信小程序的四种类型的文件 app.json app.js app.wxss app.wxml 目录树 03 获取位置打开地图 参考 效果 程序说明 04 ...
- uni-app获取位置信息(经纬度转换地址信息)
uniapp获取位置信息,获取到的信息为经纬度,再通过转换成地址信息 1.使用uni.getLocation()获取位置信息 2.下载qqmap-wx-jssdk.js插件插件下载地址 3.使用腾讯位 ...
- uniApp获取高德高德地图api发布版安全码SHA1
我在开发中使用到了高德地图api:基座测试时候可以正常使用,但是打包之后发现高德地图无法使用:所以为了解决uniApp打包后,高德地图无法使用的问题,我们需要发布版安全码SHA1来申请高德地图的key ...
- uni-app获取腾讯地图计算两经纬度的实际距离(可批量)
地址 https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance getDistance() {uni.reque ...
- Android定位功能开发(1)——获取位置
基于位置的服务包括三个方面:获取位置.地图服务.地理编码服务. 获取位置有两种方式,一种是通过GPS获得位置,精度高,耗电高,另一种是通过WLAN或通讯基站获得位置,精度低,耗电低.得到的位置信息是三 ...
- app 隔几秒记录当前经纬度位置_uni-app获取位置经纬度并定位到当前位置
uni-app使用map组件定位到当前位置并进行标注 manifest.json添加如下内容: 需要定位的页面 style="width: 100vw; height: 100vh;&quo ...
- 微信公众号,JS-SDK获取位置信息,并调起第三方地图App导航
微信公众号关联网页获取位置信息,可以参照<微信公众平台技术文档>-> 微信JS-SDK说明文档,官方链接地址:https://mp.weixin.qq.com/wiki?t=reso ...
- uni-app 微信小程序获取位置信息提示“getLocation 需要在 app.json 中申明 permission 字段”
本文同步发布在:uni-app 微信小程序获取位置信息提示"getLocation 需要在 app.json 中申明 permission 字段 我们在用 uni-app 开发微信小程序时, ...
- uni-app微信小程序uni.getLocation获取位置;authorize scope.userLocation需要在app.json中声明permission;小程序用户拒绝授权后重新授权
需求:点击按钮获取当前微信位置,以及点击拒绝授权后,下次点击还可以拉起授权窗口: 拒绝授权后重新拉起授权操作: 直接授权操作: 一.问题1:报authorize scope.userLocation需 ...
最新文章
- 【已解决】Dreamweaver修改快捷键
- VS code配置docker的shell环境
- SQL SERVER中强制类型转换cast和convert的区别
- 【TensorFlow-windows】keras接口——BatchNorm和ResNet
- 阿里云MaxCompute香港开服 将引入更多人工智能服务
- (转)Java随机数
- PHP操作Memcache实例介绍
- vue如何和PHP交互,VUE中如何使用Vue-resource完成交互
- XML 反序列化为Model
- Linux下文件的权限管理及网络连接
- 50岁开始学python_再过两年C语言就50岁了,这么老的编程语言怎么还没有过时?...
- 虚拟linux无线网卡驱动安装失败,救命1 :Atheros AR5212无线网卡驱动安装失败!!...
- 关于配置文件的节点内容加密(备忘)
- “防护左移”赋能开发人员,实时修复代码安全问题
- 【Ansible】非完全离线安装Ansible和Ansible-tower
- 计算机二级word奇偶页眉页脚,Word怎样设置奇偶页眉和页码图解
- csgo查询服务器延迟,《csgo》网络延迟怎么查看 网络延迟ping查看方法分享
- 怎么更改计算机 盘符名称,怎么更改盘符,windows修改盘符方法
- 华三服务器怎样用hdm安装linux,H3C服务器配置HDM用户指南
- 内网渗透笔记——二层发现
热门文章
- mac下anaconda安装selenium+PhantomJS
- 十分钟玩转 jQuery、实例大全
- easyui-window 关闭事件,只要关闭窗口就会触发
- asp.net日期显示 问题
- SEO十心要诀 细节决定成败
- 配置ADO.NET类文件连接优化
- 1.1_SSH项目开发流程
- 经典的JAVA面试题
- 织梦本地调试运行PHP不显示图片,织梦dedecms不能下载远程图片实现图片本地化解决方法...
- 第二章 OpenResty(Nginx+Lua)开发入门