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 구성 요소를 도입해야 하며 경도, 위도 및 마커의 세 가지 매개 변수가 전달되는 것을 볼 수 있습니다. 그 중 경도와 위도는 지도의 경도와 위도를 나타내며, 마커는 지도에 마커를 표시하는 데 사용되는 선택적 매개변수입니다.

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은 타사 지도 플러그인 사용도 지원합니다. Amap을 예로 들면, 먼저 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에서 지도를 사용하는 방법에는 두 가지가 있습니다. 하나는 uniapp과 함께 제공되는 지도 구성 요소를 사용하는 것이고, 다른 하나는 타사 지도 플러그인을 사용하는 것입니다. 필요에 따라 사용할 방법을 선택하세요. 어떤 방법을 사용하든 먼저 맵 플러그인에 대해 어느 정도 이해하고 맵 플러그인의 호출 방법에 익숙해져야 더 나은 개발이 가능합니다.

위 내용은 uniapp에서 지도를 여는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!