uniappで地図を開く方法

インテリジェント時代の発展に伴い、地図アプリケーションは人々の生活に欠かせないものになりました。地図テクノロジーの進歩により、開発者が地図を使用してより良いサービスを提供することも容易になります。その中で、uniapp はクロスプラットフォーム開発フレームワークとして、マップの開発と使用もサポートしています。しかし、一部の初心者にとっては、uniapp でマップを開く方法の問題に直面する可能性があります。この記事では、uniappで地図を開く方法を詳しく紹介します。

1. uniapp に付属の地図コンポーネントを使用する

Uniapp には、より簡単に uniapp で地図を表示できる uniMap コンポーネントが用意されています。具体的な使用方法は次のとおりです:

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

ご覧のとおり、コード内に uni-maps コンポーネントと経度の 3 つのパラメータを導入する必要があります。 、緯度、マーカーが渡されます。このうち、経度と緯度は地図の経度と緯度を表し、マーカーは地図上にマーカーを表示するために使用されるオプションのパラメータです。

2. マップ スタイルを記述する

上記のコードでは、マップ マーカーと座標のみが表示されます。マップの外観を美しくしたい場合は、それを制御するいくつかのスタイルを記述する必要があります。簡単な実装方法は以下の通りです。

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

なお、マップコンテナの高さを設定しないと正常に表示できません。

2. サードパーティの地図プラグインを使用する

uniapp は、サードパーティの地図プラグインの使用もサポートしています。 Gaode Map を例に挙げると、まず 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');

vue コンポーネントで amapPlugin プラグインを使用します:

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

サードパーティのマップ プラグイン main.js で設定し、.vue コンポーネントの createAmap メソッドを使用して呼び出す必要があります。

概要:

uniapp でマップを使用するには 2 つの方法があります。1 つは uniapp に付属のマップ コンポーネントを使用する方法、もう 1 つはサードパーティのマップ プラグインを使用する方法です。 。ニーズに応じて使用する方法を選択してください。どの方法を使用する場合でも、開発をより良く行うためには、まずマップ プラグインをある程度理解し、マップ プラグインの呼び出しメソッドに慣れる必要があります。

以上がuniappで地図を開く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。