im/pages/common/map.vue

<template>
	<view class="map_page">
		<view style="display: flex; flex-direction: column; height: 100%;">
			<!-- 使用web-view嵌入天地图 -->
			<ly-map class="ly-map" 
				v-if="lng && lat"
				@onUserEvent="onUserEvent"
				ref="map" 
				:type="type"
				:lonlat=[lng,lat]
				:map-key="apikey" />
			<view class="search_container" v-if="1==2">
				<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
				<u-cell-group :customStyle="{backgroundColor:'#FFF'}">
					<u-cell title="摇一摇" icon="/static/images/find/05.png" :size="cellSize"></u-cell>
					<u-cell title="看一看" icon="/static/images/find/06.png" :size="cellSize"></u-cell>
					<u-cell title="听一听" icon="/static/images/find/06.png" :size="cellSize"></u-cell>
					<u-cell title="附近" icon="/static/images/find/08.png" :size="cellSize"></u-cell>
					<u-cell title="购物" icon="/static/images/find/09.png" :size="cellSize"></u-cell>
				</u-cell-group>
			</view>
		</view>
		
		<view class="map_info" v-if="type == 'viewlocation'">
			<view class="left">
				<u-text wordWrap="anywhere" size="16" :text="address"></u-text>
			</view>
			<u-button @click="gotoMap" class="right">
				<uni-icons size="36" color="#07c160" type="paperplane-filled"></uni-icons>
			</u-button>
		</view>
	</view>
</template>

<script>
	import util from "@/util/index.js"
	export default {
		data() {
			return {
				keyword:"",
				cellSize:"base",
				apikey:"ecc44b16c51c888d625f0238d678a61b",
				type:"chooselocation",
				lng:"",
				lat:"",
				address:"",
			}
		},
		async onLoad(opt) {
			if(opt.type){
				this.type = opt.type;
			}
			if(opt.lng){
				this.lng = opt.lng;
			}
			if(opt.lat){
				this.lat = opt.lat;
			}
			if(opt.address){
				this.address = opt.address;
			}
			console.log(this.type)
			this.init();
		},
		methods: {
			// 初始化
			init() {
				const _this = this;
				if(this.type=='chooselocation'){
					uni.getLocation({
						success(res) {
							_this.lng = res.longitude;
							_this.lat = res.latitude;
						},
						fail() {
							_this.lng = 113;
							_this.lat = 40;
						}
					})
				}
			},
			gotoMap(){
				util.toMapAPP(this.lng,this.lat,this.address);
			},
			onUserEvent(e) {
				if(e.type == "move"){
					if(this.type=='chooselocation'){
						this.lng = e.lng;
						this.lat = e.lat;
						this.$refs.map.setMarkers([
							{
								lon: Number(e.lng),
								lat: Number(e.lat)
							}
						]);
						return ;
					}
					if(this.type=='viewlocation'){
						return ;
					}
					return ;
				}
				if(e.type=='back'){
					uni.navigateBack();
					return ;
				}
				if(e.type=='confirm'){
					this.confirm();
					return ;
				}
				//console.log(e)
			},
			/**
			 * 确定位置按钮点击
			 */
			confirm() {
				const _this = this;
				if (!this.lng || !this.lat) {
					uni.showToast({
						title: '请选择位置',
						icon: 'none'
					});
					return;
				}
				const url=`http://api.tianditu.gov.cn/geocoder?postStr={"lon":${this.lng},"lat":${this.lat},"ver":1}&type=geocode&tk=${this.apikey}`;

				console.log(url);
				uni.request({
					url:url,
					success(res){
						//console.log(res.data);
						const result = res.data.result;
						_this.address = result.formatted_address;
						console.log( {
							lng: result.location.lon,
							lat: result.location.lat,
							address: result.formatted_address
						});
						//return 1;
						// 通过事件通道返回数据给父页面
						const eventChannel = _this.getOpenerEventChannel();
						
						eventChannel.emit('onConfirm', {
							lng: result.location.lon,
							lat: result.location.lat,
							address: result.formatted_address
						});
						uni.navigateBack();
					},
				});
				return 1;
			},
			/**
			 * 返回上一页
			 */
			back() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map_page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		background: #fff;
		position: relative;
		overflow: hidden;

		.map_container {
			flex: 1;
			width: 100%;
		}
		.map_info{
			height: 100rpx;
			padding: 50rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				flex:1;
			}
			.right{
				width: 100rpx;
				.u-button{
					background-color: #ccc;
				}
			}
		}
	}
</style>