im/pages/common/map.vue

<template>
	<view class="map_page">
		<u-navbar left-icon="arrow-left" @leftClick="back" placeholder bgColor="transparent">
			<template slot="right">
				<u-button type="primary" class="confirm_btn" size="mini" @click="confirm">确定</u-button>
			</template>
		</u-navbar>
		<view style="display: flex; flex-direction: column; height: 100%;">
			<!-- 使用web-view嵌入天地图 -->
			<ly-map class="ly-map" 
				v-if="lng && lat"
				@onUserEvent="onUserEvent"
				ref="map" 
				: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>
</template>

<script>
	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;
			}
			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;
						}
					})
				}
			},
			onUserEvent(e) {
				//console.log(e)
				if(this.type=='chooselocation'){
					if(e.type == "move"){
						this.lng = e.lng;
						this.lat = e.lat;
						this.$refs.map.setMarkers([
							{
								lon: Number(e.lng),
								lat: Number(e.lat)
							}
						]);
					}
				}
				if(this.type=='viewlocation'){
				}
			},
			/**
			 * 确定位置按钮点击
			 */
			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%;
		}
	}
	.confirm_btn{
		padding: 30rpx 10rpx;
	}
</style>