map-image

<template>
	<view>
		<image :src="url" style="width: inherit;height: inherit"></image>
	</view>
</template>
<script>
	let appenv = process.env.VUE_APP_ENV;
	let that;
	export default {
		name:'iamge-map',
		data(){
			return {
				addressUrl:''
			}
		},
		props:{ 
			lat:'',
			lng:'',
			width:{
				type: String,
				default: '600'
			},
			height:{
				type: String,
				default: '600'
			}
			
		},
		watch:{
			addressUrl:(val)=>{
				if(!val)  return;
				uni.request({
					url:val,
					method:'GET',
					success:(res)=>{
						if(appenv.indexOf("us") > -1){
							if(res.statusCode === 200 && res.data.status === 'OK'){
								const address = res.data.results[0].formatted_address;
								that.$emit('updateAddress',address);
							}
						}else{
							if(res.data && res.data.status === 0 && res.data.result){
								const address = res.data.result.formatted_address;
								that.$emit('updateAddress',address);
							}
						}
						

					}
				})
			}
		},
		methods:{
			
		},
		computed:{
			url(){
				let url = '';
				if (this.lat && this.lng) {
					if (appenv.indexOf("us") > -1) {
						url = `https://maps.googleapis.com/maps/api/staticmap?center=${this.lat},${this.lng}&zoom=13&size=${this.width}x${this.height}&maptype=roadmap&markers=color:red%7Clabel:C%7C${this.lat},${this.lng}&key=AIzaSyC3FIB71mZOZpZlzYmpK__7PdEHMEzxpQ0`;
						this.addressUrl = `https://maps.google.com/maps/api/geocode/json?latlng=${this.lat},${this.lng}&sensor=true&key=AIzaSyC3FIB71mZOZpZlzYmpK__7PdEHMEzxpQ0`;
					} else {
						url = `http://api.map.baidu.com/staticimage/v2?ak=abg5M3VYGpbAoUML5iARlWEGLp6SliDT&center=${this.lng},${this.lat}&width=${this.width}&height=${this.height}&zoom=11&markers=${this.lng},${this.lat}`;
						this.addressUrl = `http://api.map.baidu.com/reverse_geocoding/v3/?ak=abg5M3VYGpbAoUML5iARlWEGLp6SliDT&output=json&location=${this.lat},${this.lng}`
					}
					that = this;
					return url
				}
			}
		}
	}
</script>

<style>
</style>