<!--
lyz
接收 props :isShow=true/false 是否展示地图
返回events @getLocation='xxx' 返回定位后所得的数据
-->

<template>
    <div v-if="isShow">
        <div id="container" style="width:100%;height:2rem;"></div>
    </div>
</template>

<script>

    export default {
        props: {
            isShow: {
                type: Boolean,
                default: true,
                getMyLocationStatus:false  // 当用户没有经纬度时获取经纬度并修改
            },
        },
        data() {
            return {
                position:{},
            }
        },
        created(){
            var data =  this.AddOrders = JSON.parse(sessionStorage.getItem('patientInfo')) || {};
            this.getMyLocationStatus = !data.Latitude || !data.Longitude?true:false;
        },
        mounted() {
            // if(this.getMyLocationStatus){
                this.getMyLocation();
            // }
        },
        methods: {

            returnLocation(){
                this.$emit('getLocation',this.position);
            },

            //定位获得当前位置信息
            getMyLocation() {
                var geolocation = new qq.maps.Geolocation("LACBZ-MDX6W-NT3RH-OLECY-XVHD3-G5BKA", "UE");
                geolocation.getLocation(this.showPosition, this.showErr);
            },

            // 定位成功
            showPosition(position) {
                this.position = position;
                this.returnLocation();
                this.setMap();
            },
            // 定位失败
            showErr() {
                console.log("定位失败再请求定位");
                this.getMyLocation();
            },

            //位置信息在地图上展示
            setMap() {
                // 步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                // 设置地图中心点
                var x = this.position.latitude;
                var y = this.position.longitude;
                var myLatlng = new qq.maps.LatLng(x,y);
                //定义工厂模式函数
                var myOptions = {
                    zoom: 20,               //设置地图缩放级别
                    center: myLatlng,    //设置中心点样式
                    mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
                }
                //获取dom元素添加地图信息
                var map = new qq.maps.Map(document.getElementById("container"), myOptions);

                // 给定位的位置添加图片标注
                var marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map
                });
                // 给定位的位置添加文本标注
                // var marker = new qq.maps.Label({
                //     position: myLatlng,
                //     map: map,
                //     content: '这是我当前的位置，偏差有点大，哈哈'
                // });
            }
        },

    }
</script>
