uniapp 获取到当前位置信息显示在地图上

上篇文章总结了获取当前位置信息的具体操作这一篇就总结一下选完位置之后在地图上显示出来

老样子先看效果图 (对应/pages/positiondetails/positiondetails)

上一篇文章是获取位置信息，获取完位置后点击下一步就看到这个地图页面因为涉及的是两个页面有页面传值的一些相关操作所以展示的时候我就主要展示接收数据的页面（/pages/positiondetails/positiondetails）需要跳转传值的页面(/pages/index/index)我就贴上跳转代码

/pages/index/index

this.addressdata就是获取到位置成功后的res

/pages/positiondetails/positiondetails

temlete

<view><map style="width: 100%; height: 400upx;margin-top: 20upx;"                     :scale="scale" :latitude="latitude":longitude="longitude" :markers="covers"></map></view>

data

data() {return {// 地图latitude: 30.3,longitude: 120.2,covers: [],  //标记点用于在地图上显示标记的位置controls: [{ //在地图上显示控件，控件不随着地图移动id: 1, //控件idiconPath: '../../static/images/location.png', //显示的图标    position: { //控件在地图的位置left: 15,top: 15,width: 50,height: 50},}],scale: 16 //地图缩放比例}},

onLoad: function(option){const item = JSON.parse(option.data)  //接受传递过来的位置信息 转换成json对象this.latitude=item.latitudethis.longitude=item.longitudethis.covers = [{latitude: item.latitude,longitude: item.longitude,iconPath: '../../static/images/location.png', //地图上的图标width: 25, //宽height: 25, //高callout: { //自定义标记点上方的气泡窗口 点击有效  content: item.address, //文本color: '#ffffff', //文字颜色fontSize: 14, //文本大小borderRadius: 2, //边框圆角bgColor: '#00c16f', //背景颜色display: 'ALWAYS', //常显padding:5  //气泡窗口的内间距},}]},
//covers相当于标记点 用于在地图上显示标记的位置

总结：这差不多就是一个完整的流程了涉及的主要点就是页面的传值并且传的是对象的形式就用到了字符串转换的相关知识拿到了传的位置信息以及经纬度之后直接赋值渲染就行了

uniapp 获取到当前位置信息显示在地图上相关推荐

h5页面调用百度地图获取当前位置并在地图上标注出来
在项目中越来越多的用到了手机的GRS定位功能,使用百度地图API获取当前位置并在地图上标注出来首先应该在官网上注册key 点击获取密钥,注册获取key. 完整代码如下: <!DOCTYPE ht ...
笔记：百度地图通过输入地名搜索位置显示在地图上
场景:刚刚接到需求---通过输入地名搜索位置显示在地图上,然后百度了一番,发现很多都是BMap版本的地图而最新我用的是BMapGL地图所以多多少少有一些不一样,查略相关文档得出解决方案
html5 微信获取当前位置,「微信小程序」实现获取当前位置并在地图上显示
盆一框发互会理工.择各近些架现跳轻机审蓝器友圈最近真是被微信小程序这货刷爆了,哪那都是它,作为一个喜欢尝(作)鲜(死)的前端汪来说,我肯定不会轻易放弃这么好的尝试机会,嘛溜的,先搭好环境压压惊分博累发 ...
uni-app获取省市区详细位置信息
效果图主要是两个功能一个是可以根据地图搜索定位获取省市区详细地址: 另外一种也可以通过picker省市区选择器来实现手动选择问题; 最后在实现功能的前提下把代码封装了一下,代码如下 /*** 格式 ...
navigator.geolocation的应用 - 将定位信息显示在百度地图上
在学习navigator.geolocation的时候,有一个实例是获取坐标后显示在谷歌地图上.众所周知,谷歌地图国内并不能直接访问,得用特殊手段,那我要测试的时候还要开着梯子挺麻烦的,想给别人用也得 ...
echarts label固定位置_ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /** * 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标 ...
android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /*** 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标* ...
高德地图上展示终端信息
本人参与的一个智慧园区的项目,网络地图开发出来的后期效果如下图所示: 初次拿到设计图时还没有左上角的全局搜索框,第一步首先是绘制出浮在上层的四张卡片,我是用遍历的方式依次渲染的: {showCards ...

uniapp 获取到当前位置信息显示在地图上

uniapp 获取到当前位置信息显示在地图上相关推荐

最新文章

热门文章