uniapp map地图

<template>
	<view class="">
			<!-- 
			 scale	Number	16	缩放级别，取值范围为3-20
			 min-scale	Number	3	最小缩放级别
			 max-scale	Number	20	最大缩放级别
			 layer-style	Number/String	1	个性化地图 需要去对应地图创建项目  选择个性地图 申请key
			 markers	Array		标记点
			 polyline	Array		路线
			 circles	Array		圆
			 controls	Array		控件
			 include-points	Array		缩放视野以包含所有给定的坐标点
			 enable-3D	Boolean	false	是否显示3D楼块    ***************************
			 show-compass	Boolean	false	是否显示指南针
			 enable-zoom	Boolean	true	是否支持缩放
			 enable-scroll	Boolean	true	是否支持拖动
			 enable-rotate	Boolean	false	是否支持旋转    **************************
			 enable-overlooking	Boolean	false	是否开启俯视	需要双指滑动
			 enable-satellite	Boolean	false	是否开启卫星图 	*************************
			 enable-traffic	Boolean	false	是否开启实时路况  最好开启
			 enable-poi	Boolean	false	是否展示 POI点
			 enable-building	Boolean	false	是否展示建筑物	App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置)
			 	*************************
			show-location	Boolean		显示带有方向的当前定位点
			polygons	Array.<polygon>		多边形		*************************
			enable-indoorMap	Boolean	false	是否展示室内地图		*************************
			@markertap	EventHandle		点击标记点时触发，e.detail = {markerId}	App-nvue 2.3.3+, App平台需要指定 marker 对象属性 id
			@labeltap	EventHandle		点击label时触发，e.detail = {markerId}	微信小程序2.9.0
			@callouttap	EventHandle		点击标记点对应的气泡时触发，e.detail = {markerId}	
			@controltap	EventHandle		点击控件时触发，e.detail = {controlId}	
			@regionchange	EventHandle		视野发生变化时触发	微信小程序、H5、百度小程序、支付宝小程序
			@tap	EventHandle		点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度	
			@updated	EventHandle		在地图渲染更新完成时触发	微信小程序、H5、百度小程序
			@anchorpointtap	EventHandle		点击定位标时触发，e.detail = {longitude, latitude}	App-nvue 3.1.0+、微信小程序2.13+
			@poitap	EventHandle		点击地图poi点时触发，e.detail = {name, longitude, latitude}	微信小程序2.3.0+
			 
			 show-location="true"
			 -->
			<map 
				v-if="isShowMap"
				:latitude="latitude" 
				:longitude="longitude" 
				:style="'height:'+windowHeight*1.6+'rpx;'"
				scale="14"
				layer-style="1"
				show-compass="true"
				enable-3D="true"
				enable-zoom="true"
				enable-scroll="true"
				enable-overlooking="true"
				:enable-satellite="true"
				enable-traffic="true"
				enable-poi="true"
				enable-building="true"
				enable-indoorMap="true"
				@markertap="markertapFn"
				@tap="tapFn"
				:polyline="polylineList"
				:polygon="polygonList"
				:circles="circlesList"
				:controls="controlsList"
				:markers="markersList"
			></map>
			<view class="" style="display: flex;">
				<input type="text" value="" :placeholder="name" v-model="inpValue" style="" disabled/>
				<button type="default" size="mini" @click="butFn">搜索</button>
			</view>
			<view class="">
				{{latitude}}----{{polylineList[0].points[0].latitude}}
				{{latitude}}----{{polylineList[0].points[1].latitude}}
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowMap:false,
			inpValue:'',
			// latitude:32.539353,
			// longitude:111.854022,
			latitude:"" ,
			longitude: "",
			name: '',
			windowHeight:'',
			/* 彩虹鞋 */
			polylineList:[
				{
					points:[
						{
							latitude:this.latitude,
							longitude:this.longitude,
						},
						{
							latitude: '23.386583716136823',
							longitude: '113.18271145313714'
						}
						 ,
						{
							latitude: '23.37665511003016',
							longitude: '113.16705333331702'
						}
					],
				
					// color:"#3ccccc",
					width:15,
					dottedLine:false,
					arrowLine:true,
					// arrowIconPath:'',
					// borderColor:"#0055ff",
					borderWidth:5,
					// colorList:[
					// 	"#3ccccc","#ff00ff","#aaff00","#aa0000","#0000ff"
					// ]
				 },
				{
					points:[
						{
							latitude:this.latitude,
							longitude:this.longitude
						}
					],
				
					// color:"#3ccccc",
					width:15,
					dottedLine:false,
					// arrowLine:true,
					// arrowIconPath:'',
					// borderColor:"#0055ff",
					borderWidth:5,
					colorList:[
						"#3ccccc","#ff00ff","#aaff00","#aa0000","#0000ff"
					]
				}
			],
			/* 多边形 */
			polygonList:[
				{
					points:[
						{
							latitude: '23.382956117160848',
							longitude: '113.17698896030176'
						},{
							latitude: '23.37485366951542',
							longitude: '113.17471176488706'
						},{ 
							latitude: '23.375054328636413',
							longitude: '113.18166941495268'
						},{
							latitude: '23.372956117160848',
							longitude: '113.17698896030176'
						},{
							latitude: '23.383091523046772',
							longitude: '113.17462191088661'
						},{
							latitude: '23.382956117160848',
							longitude: '113.17698896030176'
						}
					],
					strokeWidth:5,
					strokeColor:"#3ccccc",
					fillColor:"#000000",
					zIndex:1
				}
			],
			/* 圆形 */
			circlesList:[
				{
					latitude:'23.386235362622692',
					longitude:'113.17455887897583',
					color:'#ff0000',
					fillColor:'#00aa00',
					radius:50,
					strokeWidth:5,
				},
				{
					latitude:'23.37211704271972',
					longitude:'113.17839712001049',
					color:'#00aa00',
					fillColor:'#ff0000',
					radius:70,
					strokeWidth:5,
				}
			],
			/* 图片 */
			controlsList:[
				{
					id:123456,
					position:{
						left:10,
						top:500,
						width:40,
						height:40
					},
					iconPath:'/static/3b1273cd65e115fa7203fc7d34c1ffd.jpg',
					clickable:true
					
				},
				{
					id:1234567,
					position:{
						left:100,
						top:450,
						width:60,
						height:60
					},
					iconPath:'/static/6a7e0d73fb6753be4017f493c8ff4c4.jpg',
					clickable:true
				},
				{
					id:1234567,
					position:{
						left:180,
						top:500,
						width:40,
						height:40
					},
					iconPath:'/static/7446780ffeb6ace8730eb564686c54b.jpg',
					clickable:true
					
				}
			],
			/* markers */
			markersList:[
				{
					id:111111,
					latitude: '23.383468196874336',
					longitude: '113.173809201569',
					title:'mmm1',
					iconPath:'/static/3b1273cd65e115fa7203fc7d34c1ffd.jpg',
					rotate:10,
					width:30,
					height:30,
					callout:{
						content:"气泡1",
						color:"#0055ff",
						fontSize:14,
						borderRadius:5,
						bgColor:"#ff0000",
						padding:3,
						display:"ALWAYS",
						// display:"BYCLICK",
						textAlign:"center"
					},
					label:{
						content:"label-1",
						color:"#ff0000",
						fontSize:14,
						anchorX:1,
						anchorY:1,
						borderWidth:2,
						borderColor:"#ff007f",
						borderRadius:5,
						bgColor:"#00ff00",
						textAlign:"center",
						// aria-label:'',
						joinCluster:true
					}
				},{
					id:222222,
					latitude: '23.370167023168126',
					longitude: '113.18113565536784',
					title:'mmm2',
					iconPath:'/static/6a7e0d73fb6753be4017f493c8ff4c4.jpg',
					rotate:0,
					width:30,
					height:30,
					callout:{
						content:"气泡2",
						color:"#ff0000",
						fontSize:14,
						borderRadius:5,
						bgColor:"#0055ff",
						padding:3,
						display:"ALWAYS",
						// display:"BYCLICK",
						textAlign:"center"
					},
					label:{
						content:"label-2",
						color:"#ff0000",
						fontSize:14,
						anchorX:1,
						anchorY:1,
						borderWidth:2,
						borderColor:"#ff007f",
						borderRadius:5,
						bgColor:"#00ff00",
						textAlign:"center",
						// aria-label:'',
						joinCluster:true
					}
				}
			]
			
		};
	},
	onShow() {
		this.getLocationFn();
	},
	methods: {
		butFn(){
			uni.chooseLocation({
				// #ifdef APP-PLUS
				keyword:this.inpValue,
				// #endif
				// #ifdef MP-WEIXIN
				longitude:this.longitude,
				latitude:this.latitude,
				// #endif
				success:res=>{
					this.isShowMap=false
					this.polylineList[1].points.length=1;
					let {name,address,latitude,longitude}=res
					console.log(name,address,latitude,longitude)
					let obj={latitude,longitude}
					this.polylineList[1].points.push(obj);
					setTimeout(()=>{
						this.isShowMap=true
					},10)
				}
			})
		},
		markertapFn(e){
			console.log(e)
			console.log('markertapFn')
		},
		tapFn(e){
			console.log(e.timeStamp,e.detail.longitude,e.detail.latitude)
			console.log('tapFn')
		},
		getLocationFn() {
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				isHighAccuracy: true,
				success: res => {
					// console.log(JSON.stringify(res));
					this.latitude=this.polylineList[0].points[0].latitude=this.polylineList[1].points[0].latitude = res.latitude;
					this.longitude=this.polylineList[0].points[0].longitude=this.polylineList[1].points[0].longitude = res.longitude;
					this.name = res.address.poiName;
					const { windowWidth, windowHeight,appName } = uni.getSystemInfoSync();	
					this.windowHeight=windowHeight;
					this.controlsList[0].position.top=this.windowHeight;
					this.isShowMap=true;
				}
			});
		}
	}
};
</script>

跳转第三方应用

uni.openLocation({
		   		latitude: 32.53626,
			    longitude: 111.853678,
				name:"南阳",
			    success: function () {
			        console.log('success');
			    }
			});