uni.getLocation 实时定位功能

uni.getLocation开启实时定位功能
配合 markers 显示控件（当前位置和地址）
注意：uniapp中markers 数据赋值修改必须把markers数据都重新修改

设置地图宽高

//原生方法
const mapSearch = weex.requireModule('mapSearch')<map
class="mapStyle"   // 样式  nuve 只支持 .css 样式选择器
:style="`width:${windowWidth}px; height: ${windowHeight}px;`"    //  uni.getSystemInfo
id="mapStyleId"
:latitude="latitude"
:longitude="longitude"
:markers="markers"  // 控件显示1.定位，2.气泡显示
@regionchange="regionchangeFn"  // 拖动地图 获中心经纬度 反解析获取地址
</map>
// 获取屏幕宽高，设置地图
uni.getSystemInfo({success: function(res) {that.windowWidth = res.windowWidththat.windowHeight = res.windowHeightthat.screenHeight = res.windowHeight}
})

markers 设置地图控件ioc 和气泡

 uni.getLocation({type: 'wgs84',geocode: true,success: function (res) {that.latitude=res.latitudethat.longitude=res.longitudethat.selectTree = res.address.city.replace(/\市/, '')that.markers = [{id: 121,   // id作为控件的唯一标识，用于修改拖动地图或者修改地址的时候 更改控件latitude: res.longitude, //经纬度longitude: res.longitude,iconPath: '../../static/images/ic_position.png',  //控件图标，可修改 width: 25, // 控件图标大小 height: 40,callout:{   // 控件气泡展示内容content: `${res.address.street}${res.address.streetNum}${res.address.poiName}`,color: '#333848',borderRadius: 5,padding: 10,display:'ALWAYS',}}]},//最好加上 真机调试的时候返回错误信息 便于调试fail: function (err) {  },    complete: function (err) {  }
})

@regionchangeFn 拖动地图从新定位获取地址

1.@regionchangeFn 拖动函数返回开始和结尾两个参数
2.配合mapContext .getCenterLocation 获取中心点经纬度
3.配合mapSearch.reverseGeocode 反解析地址修改控件

         // 两个参数 移动前后 start 和 endregionchangeFn (e) {if(e.type =='end'){this.getCenterLanLat()}},getCenterLanLat() {let that = thislet mapContext = uni.createMapContext("mapStyleId", this);mapContext.getCenterLocation({type: 'wgs84',success: (res) => {mapContext.translateMarker({markerId:121,  destination:{longitude:res.longitude,latitude:res.latitude},duration: 1000,})  let point = {latitude:res.latitude, longitude:res.longitude}mapSearch.reverseGeocode({point}, function (res) {let i = res.address.indexOf('市')let addressName = res.address.substr(i+1)that.covers = [{id: 121,latitude: point.longitude,longitude: point.longitude,iconPath: '../../static/images/ic_position.png',width: 25,height: 40,callout:{content: addressName,color: '#333848',borderRadius: 5,padding: 10,display:'ALWAYS',}}]})}})},

mapSearch.poiSearchNearBy 周边搜索功能

<input
class="addres_input"
v-model="addresInput"
@input="searchAddressFn"
confirm-type="search"
placeholder-style="#AEB1BB"
placeholder="如：郑汴路东明路"
/>searchAddressFn (e) {this.isMapList = truethis.isfadeInfo = truelet option = {point: {latitude: this.latitude,longitude: this.longitude,},key: e.detail.value,  // 搜索关键字radius: 3000  // 搜索范围 3公里}mapSearch.poiSearchNearBy(option, (res)=>{console.log(res.poiList)if(res.poiList && res.poiList.length>0){this.addressList = res.poiList}})}

uniapp nvue map组件相关推荐

uni-app使用map组件开发map地图，获取后台返回经纬度进行标点
unia-pp实现map组件,获取后台返回经纬度进行标点官方文档使用步骤代码示例官方文档使用步骤使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发 ...
uniapp中map组件动态加载marks标记
之前在uniapp项目中用到地图都是用h5的方式实现的,比如用高德地图webapi可以不收uniapp的限制,uniapp中vue页面中map组件功能太少,nvue中css写的有蛋疼. 言归正传,ma ...
uniapp 使用map组件动态自定义标记点图标及内容文字
先看效果地图中的标记点可以动态变化自定义的图片与内容原理通过map组件中的 markers 属性设置标记点用于在地图上显示标记的位置 map组件所在uniapp官网位置:map-uni-a ...
uniapp使用map地图组件
本人所在的公司最近在做共享电动车的项目,打开该应用看到的就是一副地图,可以获取附近共享电动车的地址.状态等信息,开发这个应用程序还需要在地图上规划路线.动态显示轨迹.轨迹回放等功能.共享开发的项目功能 ...
微信小程序地图map组件 SDK 并实现导航
说明本文使用uniapp使用map组件作为示例效果预览主要实现: 地图上搜索关键字地址对地址设置标记点位置授权被拒后,重新触发授权的处理逻辑实现获取当前位置,计算目标地址与当前位置的距离 ...
uniapp nvue使用live-pusher组件以及腾讯云实现直播推拉流
目录前言效果预览一.推流使用live-pusher组件二.拉流使用video组件三.前端推流核心代码四.推流完整示例(包含美颜/相机切换/结束直播反馈效果) 五. 拉流完整示例(包含回放暂 ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
uniapp内置组件
目录 3.1.视图容器 view scroll-view swiper match-media 3.2.表单组件 form input App平台iOS端软键盘上方横条去除方案关于软键盘弹出的逻辑说 ...
uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...

uniapp nvue map组件

Map组件功能使用

uni.getLocation 实时定位功能

设置地图宽高

markers 设置地图控件ioc 和气泡

@regionchangeFn 拖动地图从新定位获取地址

mapSearch.poiSearchNearBy 周边搜索功能

uniapp nvue map组件相关推荐

最新文章

热门文章

uniapp nvue map组件

Map组件功能使用

uni.getLocation 实时定位功能

设置地图宽高

markers 设置地图控件ioc 和气泡

@regionchangeFn 拖动地图 从新定位 获取地址

mapSearch.poiSearchNearBy 周边搜索功能

uniapp nvue map组件相关推荐

最新文章

热门文章

@regionchangeFn 拖动地图从新定位获取地址