微信小程序 - - 地图及导航
地图及导航一、开发前的准备二、代码实现1.index.vue2.mappage.vue3.pages.json4.app.json一、开发前的准备1.环境准备：HBuilderX（软件管理中可以下载），微信开发者工具，2.在微信公众平台（官方）上注册申请一个微信小程序3.获取小程序的AppID4.在腾讯位置服务上创建一个应用5.配置key6.代开HbuilderX创建一个项目7.将项目运行到小程序
·
一、开发前的准备
- 1.环境准备：HBuilderX（软件管理中可以下载），微信开发者工具，
- 2.在微信公众平台（官方）上注册申请一个微信小程序
- 3.获取小程序的AppID
- 4.在腾讯位置服务上创建一个应用
- 5.配置key
- 6.代开HbuilderX创建一个项目
- 7.将项目运行到小程序模拟器（HBuilder连接微信开发者工具）
注意：需要提前将微信开发者工具的服务端口
- 8.相关插件
腾讯路线规划插件、地图选点插件、地铁图插件
- 9.开发结构目录
二、代码实现
1.index.vue
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<!-- 点击按钮去下一个页面 -->
<button type="default" @click="tonextpage">导航地址</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//在腾讯位置服务中自定义的key
key:'AMABZ-2QRKF-7GHJX-JARJT-THAC6-NNFCZ',
//从腾讯地图中获取的位置
city:'河南省郑州市惠济区开元路68号',
//经纬度
lat:0,
lng:0,
}
},
onLoad() {
//页面加载完成后获取 自己现在 的经纬度
// uni.getLocation({
// type: 'gbj02',
// success: res=>{
// //获取到坐标（经纬度）并存起来
// this.lng=res.longitude;
// this.lat=res.latitude;
// // console.log('当前位置的经度：' + res.longitude);
// // console.log('当前位置的纬度：' + res.latitude);
// }
// });
//页面渲染好后给目的地址解析成坐标
uni.request({
//地址解析（地址转坐标）https://lbs.qq.com/service/webService/webServiceGuide/webServiceGeocoder
url:'https://apis.map.qq.com/ws/geocoder/v1/?address='+this.city+'&key='+this.key,
success:res=>{
this.lat=res.data.result.location.lat
this.lng=res.data.result.location.lng
}
})
},
methods: {
//按钮点击事件：点击按钮去下一个页面mappage，并携带经纬度两个参数
tonextpage(){
uni.navigateTo({
url:'../mappage/mappage?lat='+this.lat+'&lng='+this.lng //给跳转路径，并且将两个参数（经纬度）带到mappage页面
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
2.mappage.vue
<template>
<view class="content">
<!-- markers：获取实时的标记点 -->
<!-- show-location：设置一个实时的小箭头，获取自己当前的位置 -->
<!-- @updated:地图加载完时触发，将flag设置为true -->
<map
id="myMap"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
show-location
@updated="lodingmap">
</map>
<view class="tobus">
<image @click="lodingback" class="dw" src="../../static/dw.png"></image>
<view class="tobus_box">
<text class="tobus_box_title">懂我不言 (卫生打扫)</text>
<view class="txt_list">
<text>惠济区</text>
<text>郑州师范学院</text>
<text>图书馆</text>
</view>
<button type="default" @click="tobus">到这去</button>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return {
//这里的经纬度是 所在地 的经纬度
latitude:0,
longitude:0,
//实时标记点，必须外面是一个数组，里面是一个对象
markers:[
{
id:1,
width:50, //宽度
height:50, //高度
iconPath: '../../static/goal_weizhi.png', //目标位置图标路径
//这里的经纬度是 目的地 的经纬度
latitude:0,
longitude:0,
}
],
num:1, //是否开启导航（默认开启导航）
city:'', //标记点的位置
flag:false, //当页面刷新完全后才调用moveToLocation方法，默认为没有刷新出来
}
},
onReady(){ //页面初次渲染完成
//获取地图实例，通过id=myMap绑定到<map>标签
this.mapCtx=wx.createMapContext('myMap')
},
onLoad(option){ //加载完成后渲染事件，可以将index.vue传过来的参数使用option进行接收
// console.log(option.lat); //string类型，需要将其转化为float类型(因为经纬度有小数点)
// console.log(option.lng);
//获取到目的地坐标
this.markers[0].latitude=parseFloat(option.lat)
this.markers[0].longitude=parseFloat(option.lng)
//进入地图页面后获取自己的坐标
uni.getLocation({
type: 'gcj02',
success:res=>{
//获取到所在地坐标（经纬度）并存起来
this.longitude=res.longitude;
this.latitude=res.latitude;
// console.log('当前位置的经度：' + res.longitude);
// console.log('当前位置的纬度：' + res.latitude);
// console.log(this.latitude)
// console.log(this.longitude)
//把坐标转换为地址（逆解析）
//https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1
uni.request({
url:'https://apis.map.qq.com/ws/geocoder/v1/?location='
+this.markers[0].latitude+','+this.markers[0].longitude
+'&key=AMABZ-2QRKF-7GHJX-JARJT-THAC6-NNFCZ&get_poi=1',
success :res=>{
//console.log(res.data.result.address);
this.city=res.data.result.formatted_addresses.recommend; //formatted_addresses更具有人性化的地址
}
})
//获取地图实例mapCtx对象，使用includePoints方法实现目标位置与所在位置自适应在一个页面显示
//获取所在地位置成功后，使用地图实例中的方法，让目的位置(标记)和所在位置(我的)展示在可视区域内
//includePoints缩放视野展示所有经纬度
this.mapCtx.includePoints({
padding:[140,50,140,50], //坐标点形成矩形边缘到地图边缘的距离，上，右，下，左
points:[ //可视区域的坐标点列表[{纬度,经度}]
//所在地位置
{
latitude:this.latitude,
longitude:this.longitude
},
//目的位置
{
latitude:this.markers[0].latitude,
longitude:this.markers[0].longitude
}
]
})
}
});
},
methods:{
//地图加载完成时触发事件
lodingmap(){
this.flag=true
},
//点击回到自己的位置
lodingback(){
if(this.flag){
//获取地图实例mapCtx对象，使用moveToLocation方法：将地图中心运动到当前定位点，配合map组件的show-location使用
this.mapCtx.moveToLocation()
}
},
//到目标地点
tobus(){
if(this.flag){
let plugin = requirePlugin('routePlan'); //插件名称为app.json中plugins中配置的routePlan
let key = 'AMABZ-2QRKF-7GHJX-JARJT-THAC6-NNFCZ'; //使用在腾讯位置服务申请的key
let referer = 'Indoor_Nav'; //室内导航Indoor_Navagation，调用插件的app的名称(使用在腾讯位置服务申请的key的名称)
let endPoint = JSON.stringify({ //终点
'name': this.city,
'latitude': this.markers[0].latitude,
'longitude': this.markers[0].longitude
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint +'&navigation=' +this.num //navigation为是否开启导航，1是true，就是开启导航
});
}
}
},
}
</script>
<style>
map{
width:100%;
height:calc(100vh - 226rpx);
}
.tobus{
height: 266rpx; /* rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应 */
box-sizing: border-box;
padding: 20rpx 30rpx 30rpx 30rpx;
background-color: #fff;
margin: 0 0rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-radius: 10rpx 10rpx 0 0;
}
.tobus_box_title{
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.txt_list{
display: flex;
margin: 30rpx 0;
}
.txt_list text{
font-size: 24rpx;
color: #333;
margin-right: 14rpx;
}
.tobus .tobus_box button{
height: 84rpx;
background: #1588ED;
border-radius: 10rpx;
color: #fff;
font-size: 32rpx;
}
.dw{
transform: translate(-100%);
top: -100rpx;
position: absolute;
right: 20rpx;
width: 70rpx;
height: 70rpx;
bottom: 450rpx;
}
</style>
3.pages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "任务页面"
}
},
{
"path": "pages/mappage/mappage",
"style": {
"navigationBarTitleText": "地图页面"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
4.app.json
{
"pages": [
"pages/index/index",
"pages/mappage/mappage"
],
"plugins": {
"routePlan": {
"version": "1.0.14",
"provider": "wx50b5593e81dd937a"
}
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
},
"subPackages": [],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"usingComponents": {}
}
前往低代码交流专区
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)