Bagaimana untuk membuka peta dalam uniapp

Dengan perkembangan era pintar, aplikasi peta telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Kemajuan teknologi peta juga memudahkan pembangun menggunakan peta untuk menyediakan perkhidmatan yang lebih baik. Antaranya, uniapp, sebagai rangka kerja pembangunan merentas platform, turut menyokong pembangunan dan penggunaan peta. Tetapi bagi sesetengah pemula, mereka mungkin menghadapi masalah cara membuka peta dalam uniapp. Artikel ini akan memperkenalkan anda secara terperinci cara membuka peta dalam uniapp.

1 Gunakan komponen peta yang disertakan dengan uniapp

Uniapp menyediakan komponen uniMap, yang boleh memaparkan peta dalam uniapp dengan lebih mudah. Penggunaan khusus adalah seperti berikut:

1 Perkenalkan komponen 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>

Seperti yang anda lihat, komponen uni-maps perlu diperkenalkan dalam kod dan tiga parameter bagi. longitud, latitud dan penanda dilalui. Antaranya, longitud dan latitud mewakili longitud dan latitud peta, dan penanda ialah parameter pilihan yang digunakan untuk memaparkan penanda pada peta.

2. Tulis gaya peta

Dalam kod di atas, hanya penanda dan koordinat peta dipaparkan. Jika anda ingin mencantikkan rupa peta, anda perlu menulis beberapa gaya untuk mengawalnya. Berikut ialah kaedah pelaksanaan mudah:

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

Perlu diambil perhatian bahawa ketinggian bekas peta mesti ditetapkan, jika tidak, ia tidak boleh dipaparkan seperti biasa.

2. Gunakan pemalam peta pihak ketiga

uniapp juga menyokong penggunaan pemalam peta pihak ketiga. Mengambil AMAP sebagai contoh, anda perlu mengkonfigurasi parameter yang berkaitan dalam main.js terlebih dahulu:

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

Gunakan pemalam amapPlugin dalam komponen 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>

Sepatutnya ambil perhatian bahawa, gunakan pemalam peta pihak ketiga perlu dikonfigurasikan dalam main.js dan dipanggil menggunakan kaedah createAmap dalam komponen .vue.

Ringkasan:

Terdapat dua cara untuk menggunakan peta dalam uniapp, satu ialah menggunakan komponen peta yang disertakan dengan uniapp dan satu lagi ialah menggunakan pemalam peta pihak ketiga . Pilih kaedah yang hendak digunakan berdasarkan keperluan anda sendiri. Tidak kira kaedah yang digunakan, anda perlu mempunyai pemahaman tertentu tentang pemalam peta terlebih dahulu dan biasa dengan kaedah panggilan pemalam peta untuk membangunkan dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk membuka peta dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!