⼩程序之map组件（从我的位置到指定位置导航）需求
不显⽰ map 组件，点击对应按钮，从⽽实现导航
所⽤到的组件 + API
1. map组件
2. wx.getLocation(Object object) – 获取当前的地理位置、速度。
3. wx.openLocation(Object object) – 使⽤内置地图查看位置。
app.json 配置
"permission":{
"scope.userLocation":{
go2map地图北京"desc":"你的位置信息将⽤于⼩程序位置接⼝的效果展⽰"
}
},
.xml
<view class="shop_info">
<view class="info_item  bgWhite"tap="goShowMap">
<i class="iconfont address"></i>
<text>xxxxx地址</text>
</view>
</view>
<map id="map"longitude="{{longitude}}"latitude="{{latitude}}"scale="14"markers="{{markers}}"
bindmarkertap="markertap"bindregionchange="regionchange"show-location >
</map>
.
js
const app =getApp()
Page({
data:{
//设置标记点
markers:[
{
latitude:23.1066805,
longitude:113.3245904,
name:'⼴州塔',
address:'⼴州市海珠区阅江西路222号', }
]
,
latitude:'',
longitude:'',
},
onLoad:function(){
let _self =this;
type:'gcj02',
success:(res)=>{
_self.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
},
//查看地图
goShowMap:function(e){
this.openMap()
},
openMap:function(){
let that =this;
wx.openLocation({
latitude:this.data.markers[0].latitude,
longitude:this.data.markers[0].longitude,      name:this.data.markers[0].name,
address:this.data.markers[0].address, })
},
})
.wxss
display: flex;
align-items: center;
padding: 32rpx 30rpx;
border-bottom: solid 1px #f3f0f3;        i{
font-size: 38rpx;
font-weight: 600;
}
text{
flex: 1;
height: 100%;
margin-left: 12rpx;
font-size: 30rpx;
}
&:first-child{
border-top: solid 1px #f3f0f3;
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。