How to open the map in uniapp

With the development of the intelligent era, map applications have become an indispensable part of people's lives. The advancement of map technology also makes it easier for developers to use maps to provide better services. Among them, uniapp, as a cross-platform development framework, also supports the development and use of maps. But for some beginners, they may face the problem of how to open the map in uniapp. This article will introduce you in detail how to open the map in uniapp.

1. Use the map component that comes with uniapp

Uniapp provides the uniMap component, which can more easily display the map in uniapp. The specific usage is as follows:

1. Introduce the uniMap component

<template>
   <view>
      <uni-maps :longitude="longitude" :latitude="latitude" :markers="markers"></uni-maps>
   </view>
</template>

<script>
   export default{
       data(){
            return{
                 longitude: '116.362887',
                 latitude: '39.960143',
                 markers:[
                     {
                           id:1,
                           longitude:'116.362887',
                           latitude:'39.960143',
                           title:'北京站',
                     },
                     {
                           id:2,
                           longitude:'116.407894',
                           latitude:'39.904265',
                           title:'天安门',
                     },
                 ]
            }
        }
    }
</script>

As you can see, the uni-maps component needs to be introduced in the code and the three parameters of longitude, latitude, and markers are passed in. Among them, longitude and latitude represent the longitude and latitude of the map, and markers are optional parameters used to display markers on the map.

2. Write the map style

In the above code, only the map markers and coordinates are displayed. If you want to beautify the appearance of the map, you need to write some styles to control it. The following is a simple implementation method:

.uni-maps{
    height:800rpx;
    width: 100%;
}

.uni-maps /deep/ .xm-map-scale {
    background-color: #fff;
    color: #666;
}

.uni-maps /deep/ .xm-map-timesvg{
    width:18px;
}

It should be noted that the height of the map container must be set, otherwise it cannot be displayed normally.

2. Use third-party map plug-ins

uniapp also supports the use of third-party map plug-ins. Taking Amap as an example, you need to configure relevant parameters in main.js first:

import Vue from 'vue';
import App from './App';
import store from './store';
import {
   router,
   // #ifdef APP-PLUS
   mpvueAndroidBackEvent,
   // #endif
   RouterMount
} from './router';
import request from '@/common/request';

import index from '@/pages/index/index.vue';

Vue.config.productionTip = false;
App.mpType = 'app';

Vue.prototype.$http = request;

let amapPlugin = requirePlugin('amapPlugin');

Vue.prototype.$amapPlugin = amapPlugin;

Vue.component('index', index);

// #ifdef APP-PLUS
mpvueAndroidBackEvent(router, () => {
   console.log('android-hardware-back-event');
   let pages = getCurrentPages();
   console.log('pages: ', pages);
   if (pages.length > 1) {
     router.back(-1);
   } else {
     router.push('/pages/tabbar/index');
     return;
   }
});
// #endif

// #ifdef H5
router.onReady(() => {
   if (router.app.$route.path === '/') {
      router.push('/pages/tabbar/index');
   }
});
// #endif

RouterMount(App, router, '#app');

Use the amapPlugin plug-in in the vue component:

<template>
   <view style="height: 100%">
      <view class="map">
         <map :id=&#39;id&#39; :mp-location=&#39;true&#39; :show-location=&#39;true&#39; :markers=&#39;markersList&#39; :scale="15"></map>
      </view>
   </view>
</template>
<script>
   export default {
      data() {
         return {
            id: 'map',
            markersList: [
               {
                  id: 0,
                  iconPath: '../../static/images/icon_location.png',
                  longitude: '',
                  latitude: '',
                  width: 40,
                  height: 40
               }
            ]
         }
      },
      onReady() {
         let vm = this;
         let amapPlugin = vm.$amapPlugin.createAmap({
            key: 'your amap key',//此处填写你的高德地图key
            version: '',
         });
         wx.getLocation({
            type: 'gcj02',
            success: res => {
               console.log(res);
               if (res.longitude && res.latitude) {
                  vm.markersList[0].longitude = res.longitude;
                  vm.markersList[0].latitude = res.latitude;
                  let marker = vm.markersList[0];
                  let cpoint = [res.longitude, res.latitude];
                  amapPlugin.getRegeo({
                     location: cpoint.join(),
                     success: function (data) {
                        marker.title = data[0].name;
                        marker.address = data[0].desc;
                        vm.markersList = [marker];
                     },
                     fail: function (info) {
                        console.log(info);
                     },
                  });
               }
            }
         })
      }
   }
</script>
<style>
   .map {
      height: 100%;
      overflow: hidden;
   }

   map,
   image,
   textarea,
   scroll-view {
      width: 100%;
      height: 100%;
   }
</style>

It should be noted that using a third-party map plug-in It needs to be configured in main.js and called using the createAmap method in the .vue component.

Summary:

There are two ways to use maps in uniapp, one is to use the map component that comes with uniapp, and the other is to use a third-party map plug-in. Choose which method to use based on your needs. No matter which method is used, you need to have a certain understanding of the map plug-in first and be familiar with the calling method of the map plug-in in order to develop better.

The above is the detailed content of How to open the map in uniapp. For more information, please follow other related articles on the PHP Chinese website!