uniapp使用腾讯地图_uniapp 使用腾讯地图

<template>
	<view>
		<button @click="formSubmit">规划路线</button>
		<!-- <page-head :title="title"></page-head> -->
		<view class="uni-common-mt">
			<view>
				<map id="myMap" scale='16' show-location :polyline="polyline" :longitude='longitude'
					:latitude='latitude'>
				</map>
 
				<!--输入起点和目的地经纬度坐标，格式为string格式-->
				<!--起点输入框,同终点，不填默认当前位置-->
				<!-- <label>起点坐标：<input style="border:1px solid #000;" @blur="startInput"></input></label> -->
				<!--终点输入框,例：39.984060,116.307520-->
				<!-- <label>终点坐标：<input style="border:1px solid #000;" @blur="endInput"></input></label> -->
				<!--提交表单数据-->
				<!-- <button @click="formSubmit">路线规划</button> -->
 
			</view>
		</view>
	</view>
</template>
<script>
	import QQMapWX from 'static/js/qqmap-wx-jssdk.min.js';
	import {
		wgs84_to_gcj02
	} from "static/js/wgs84_to_gcj02.js"
	import {
		VueJsonp
	} from 'vue-jsonp'
	export default {
		data() {
			return {
				start: '',
				dest: '',
				qqmapsdk: '',
				polyline: '',
				longitude: 113.324520,
				latitude: 23.099994,
			}
		},
 
		methods: {
			startInput(e) {
				console.log(e.detail);
				this.start = e.detail.value
			},
			endInput(e) {
				this.dest = e.detail.value
			},
 
			formSubmit(e) { //https://apis.map.qq.com/tools/routeplan
				let url = 'https://apis.map.qq.com/ws/direction/v1/driving';
				this.$jsonp(url, {
					key: '64EBZ-RGCWQ-HJ45U-BF4AX-P7LWO-LMFVS',
					from: '29.984060,116.307520',
					to: '39.984060,116.307420',
					output: 'jsonp'
				}).then(res => {
					var ret = res;
					var coors = ret.result.routes[0].polyline,
						pl = [];
					//坐标解压（返回的点串坐标，通过前向差分进行压缩）
					var kr = 1000000;
					for (var i = 2; i < coors.length; i++) {
						coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
					}
					//将解压后的坐标放入点串数组pl中
					for (var i = 0; i < coors.length; i += 2) {
						pl.push({
							latitude: coors[i],
							longitude: coors[i + 1]
						})
					}
					//转坐标系
					// let tmep= wgs84_to_gcj02(Number(longitude),Number(latitude))
					console.log(pl)
					//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
					this.latitude = pl[0].latitude,
						this.longitude = pl[0].longitude,
						this.polyline = [{
							points: pl,
							color: '#FF0000DD',
							width: 4
						}]
 
				})
			}
 
		}
	}
</script>
<style>
	map {
		width: 100%;
		height: 60vh;
	}
</style>

引入qqmap-wx-jssdk.min.js在腾讯地图官网下载

vue-jsonp解决地图跨域问题