<template>
    <div>
        <div id="container" style="width:100%;height:450px;"></div>
    </div>
</template>

<script>
    // +----------------------------------------------------------------------
    // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
    // +----------------------------------------------------------------------
    // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
    // +----------------------------------------------------------------------
    // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
    // +----------------------------------------------------------------------
    // | Author: CRMEB Team <admin@crmeb.com>
    // +----------------------------------------------------------------------
    import { TMap } from "./index";
    export default {
        props: {
            lat: {
                type: Number,
                default: 34.34127
            },
            lon: {
                type: Number,
                default: 108.93984
            },
            mapKey: {
                tyep: String
            },
            address: {
                tyep: String
            }
        },
        data() {
            return {
                geocoder: undefined,
                marker: null,
                resultDatail: {}
            };
        },
        created() {
            this.initMap();
        },
        methods: {
            //初始化地图
            initMap() {
                TMap(this.mapKey).then(qq => {
                    var map;
                    var center = new qq.maps.LatLng(this.lat, this.lon);
                    map = new qq.maps.Map(document.getElementById("container"), {
                        // center: center,
                        zoom: 15
                    });
                    //调用地址解析类
                    this.geocoder = new qq.maps.Geocoder({
                        complete: result => {
                            map.setCenter(result.detail.location);
                            this.marker = new qq.maps.Marker({
                                map,
                                position: result.detail.location
                            });
                            this.resultDatail = result.detail;
                            this.$emit("getCoordinates", result.detail);
                        }
                    });
                    this.geocoder.getAddress(center);

                    // this.geocoder.getLocation(this.address);
                    // 开启监听点击
                    qq.maps.event.addListener(map, "click", event => {
                        this.marker.setMap(null);
                        this.marker.position = {
                            lat: event.latLng.getLat(),
                            lng: event.latLng.getLng()
                        };
                        var coord = new qq.maps.LatLng(
                            event.latLng.getLat(),
                            event.latLng.getLng()
                        );
                        this.geocoder.getAddress(coord);
                    });
                });
            },
            // 搜索地点
            searchKeyword(address = "西安") {
                this.marker.setMap(null);
                this.geocoder.getLocation(address);
            }
        }
    };
</script>

<style scoped>
</style>
