QuickApp with HMS Location Kit

location.ux

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text class="title">Location Finder</text>
    <text>To find your place in the application, firstly press the "Obtain the geographical location" button. Then click the "show my location" button.
      
      After your location is determined, "Get information" will be automatically called for information about the location.
      
      </text>
    <input type="button" class="mybutton" onclick="getGeolocation" value="Obtain the geographical location." />
    <input type="button" class="mybutton" onclick="openLocation" value="Show my location" />
    <input type="button" class="mybutton" onclick="getInfo" value="Get Information" />
    <text class="data_message_shower">{{received_data}}</text>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .mybutton {
    font-size: 30px;
    border-radius: 5px;
    color: #ffffff;
    background-color: #00bfff;
    width: 80%;
    margin: 10px;
  }

  .title {
    font-size: 100px;
    font-weight: bold;
    color: #000000;
  }
  .data_message_shower {
    margin-top: 20px;
    text-align: center;
  }
</style>

<script>

  module.exports = {
    data: {
   
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'Location Kit Example',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    getGeolocation: function () {
     
    },
    openLocation: function () {
     
    },
    getInfo: function () {

    }
  }
</script>