| uniapp 获取到当前位置信息显示在地图上 | 您所在的位置：网站首页 › 牡丹江在地图上的位置 › uniapp 获取到当前位置信息显示在地图上 |
uniapp 获取到当前位置信息显示在地图上
|
上篇文章总结了获取当前位置信息的具体操作 这一篇就总结一下选完位置之后 在地图上显示出来 老样子 先看效果图 (对应/pages/positiondetails/positiondetails)
上一篇文章是获取位置信息，获取完位置后点击下一步就看到这个地图页面 因为涉及的是两个页面有页面传值的一些相关操作 所以展示的时候我就主要展示接收数据的页面（/pages/positiondetails/positiondetails） 需要跳转传值的页面(/pages/index/index)我就贴上跳转代码 /pages/index/index
this.addressdata就是获取到位置成功后的res
/pages/positiondetails/positiondetails temlete data data() { return { // 地图 latitude: 30.3, longitude: 120.2, covers: [], //标记点用于在地图上显示标记的位置 controls: [{ //在地图上显示控件，控件不随着地图移动 id: 1, //控件id iconPath: '../../static/images/location.png', //显示的图标 position: { //控件在地图的位置 left: 15, top: 15, width: 50, height: 50 }, }], scale: 16 //地图缩放比例 } },js onLoad: function(option){ const item = JSON.parse(option.data) //接受传递过来的位置信息 转换成json对象 this.latitude=item.latitude this.longitude=item.longitude this.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相当于标记点 用于在地图上显示标记的位置总结：这差不多就是一个完整的流程了涉及的主要点就是页面的传值 并且传的是对象的形式 就用到了字符串转换的相关知识 拿到了传的位置信息以及经纬度之后 直接赋值渲染就行了 |
【本文地址】
公司简介
联系我们