A brief analysis of the usage of uniapp $getappmap method

As a cross-platform development framework, uniapp provides developers with rich API interfaces during the development process, among which the $getAppMap method is one of them. The $getAppMap method can obtain an instance of the application map in the uniapp application, allowing developers to perform map-related operations through the instance. This article will provide a detailed introduction and example operation of this method.

First of all, we need to understand the basic components uni-app-plus and uni-app-plus-map that are needed to develop map-related functions in uniapp, and introduce these two components into the project (steps You can refer to the uniapp official documentation), and then start using the $getAppMap method.

$getAppMap method is very simple to use. You only need to introduce the method in the page that needs to use the map and call it in the life cycle function onReady. The code is as follows:

<template>
  <div class="container">
    <map id="map" :style="{height: windowHeight + &#39;px&#39;}"></map>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mapInstance: null,
        windowHeight: 0
      }
    },
    onReady() {
      uni.$getAppMap().then((map) => {
        this.mapInstance = map;
        this.mapInstance.moveToLocation();
      });
      uni.getSystemInfo({
        success: (res) => {
          this.windowHeight = res.windowHeight;
        }
      });
    }
  }
</script>

The above code first introduces the uni-app-plus-map component, adds a map component with the id map in the template, and passes $getAppMap in the onReady life cycle function Method to get an instance of the application map. After successful acquisition, we assign the instance to the variable mapInstance and call the moveToLocation method through the instance to move the map to the current location. At the same time, in order to adapt the height of the page to the current screen height, we obtain the window height through the uni.getSystemInfo method, then assign the height to the windowHeight variable and bind it to the container.

After obtaining the map instance, we can use the instance to perform various map-related operations. For example, we can get the latitude and longitude of the current map center point, the code is as follows:

this.mapInstance.getCenterLocation({
  success: (res) => {
    console.log(res.longitude, res.latitude);
  }
});

At the same time, we can also add marker points, the code is as follows:

this.mapInstance.addMarker({
  id: 0,
  longitude: 116.397428,
  latitude: 39.90923,
  title: '标记点1',
  iconPath: '/static/point.png'
});

In the above code, we added an id The marker point is 0, and the longitude and latitude, title and icon path of the marker point are set. Similarly, we can use this instance to zoom in, zoom out, move and other operations on the map. For specific API documentation, please refer to the uni-app-plus-map official documentation.

To sum up, the $getAppMap method is one of the indispensable and important methods in uniapp to implement map-related functions. Through this method, we can easily obtain an instance of the application map and use the instance to perform various map-related operations. I believe that after you use the methods introduced in this article, you will be able to develop uniapp applications more flexibly and provide users with better map services.

The above is the detailed content of A brief analysis of the usage of uniapp $getappmap method. For more information, please follow other related articles on the PHP Chinese website!