<template>
    <span class="nearby" @click="handler">
        <i class="lofty_iconfont lofty-icon-locate"></i>
        <span class="tip">Nearby</span>
    </span>
</template>
<script>

export default {
    props: {
      map: Object,
      mapConfig: Object
    },
    methods: {
        handler() {
            if (window.navigator && window.navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    position => {
                        this.map.setCenter(
                            {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            },
                            this.mapConfig.zoom
                        );
                    },
                    err => {
                        alert(err.message);
                    }
                );
            }
        }
    }
};
</script>
<style lang="scss">
.site-map .nearby.map-tool {
    width: 30px;
    height: 30px;
    right: 20px;
    bottom: 20px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    display:flex;
    .lofty_iconfont.lofty-icon-locate{
        margin:auto;
    }
    &:hover .tip {
        display: block;
    }
}
</style>
