微信小程序 - - 地图及导航

一、开发前的准备

• 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绑定到
			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

plugins配置的引用的位置

{
  "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": {}
}