Comment ouvrir la carte dans Uniapp

Avec le développement de l'ère intelligente, les applications cartographiques sont devenues un élément indispensable de la vie des gens. Les progrès de la technologie cartographique permettent également aux développeurs d’utiliser plus facilement les cartes pour fournir de meilleurs services. Parmi eux, uniapp, en tant que cadre de développement multiplateforme, prend également en charge le développement et l'utilisation de cartes. Mais pour certains débutants, ils peuvent être confrontés au problème de savoir comment ouvrir la carte dans Uniapp. Cet article vous présentera en détail comment ouvrir la carte dans uniapp.

1. Utilisez le composant cartographique fourni avec uniapp

uniapp fournit le composant uniMap, qui peut afficher plus facilement des cartes dans uniapp. L'utilisation spécifique est la suivante :

1. Introduisez le composant uniMap

<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>

Vous pouvez voir que le composant uni-maps doit être introduit dans le code et que les trois paramètres de longitude, de latitude et de marqueurs sont transmis. Parmi eux, la longitude et la latitude représentent la longitude et la latitude de la carte, et les marqueurs sont des paramètres facultatifs utilisés pour afficher des marqueurs sur la carte.

2. Écrivez le style de la carte

Dans le code ci-dessus, seuls les marqueurs et les coordonnées de la carte sont affichés. Si vous souhaitez embellir l'apparence de la carte, vous devez écrire des styles pour la contrôler. Voici une méthode de mise en œuvre simple :

.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;
}

Il est à noter que la hauteur du conteneur de la carte doit être définie, sinon elle ne pourra pas être affichée normalement.

2. Utiliser des plug-ins de carte tiers

uniapp prend également en charge l'utilisation de plug-ins de carte tiers. En prenant Amap comme exemple, vous devez d'abord configurer les paramètres pertinents dans main.js :

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');

Utilisez le plug-in amapPlugin dans le composant vue :

<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>

Il convient de noter que l'utilisation d'un plug-in de carte tiers nécessite à configurer dans main.js et appelez-le en utilisant la méthode createAmap dans le composant .vue.

Résumé :

Il existe deux façons d'utiliser les cartes dans uniapp, l'une consiste à utiliser le composant cartographique fourni avec uniapp et l'autre consiste à utiliser un plug-in de carte tiers. Choisissez la méthode à utiliser en fonction de vos besoins. Quelle que soit la méthode utilisée, vous devez d'abord avoir une certaine compréhension du plug-in de carte et vous familiariser avec la méthode d'appel du plug-in de carte afin de mieux développer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!