So öffnen Sie die Karte in Uniapp

Mit der Entwicklung des Smart-Zeitalters sind Kartenanwendungen zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. Die Weiterentwicklung der Kartentechnologie erleichtert Entwicklern auch die Nutzung von Karten zur Bereitstellung besserer Dienste. Unter anderem unterstützt Uniapp als plattformübergreifendes Entwicklungsframework auch die Entwicklung und Verwendung von Karten. Einige Anfänger stehen jedoch möglicherweise vor dem Problem, wie sie die Karte in Uniapp öffnen. In diesem Artikel erfahren Sie ausführlich, wie Sie die Karte in Uniapp öffnen.

1. Verwenden Sie die mit uniapp gelieferte Kartenkomponente.

uniapp stellt die uniMap-Komponente bereit, mit der die Karte einfacher in uniapp angezeigt werden kann. Die spezifische Verwendung ist wie folgt:

1. Führen Sie die uniMap-Komponente ein

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

Sie können sehen, dass die Uni-Maps-Komponente in den Code eingeführt werden muss und die drei Parameter Längengrad, Breitengrad und Markierung übergeben werden müssen. Unter diesen stellen Längengrad und Breitengrad den Längen- und Breitengrad der Karte dar, und Markierungen sind optionale Parameter, die zum Anzeigen von Markierungen auf der Karte verwendet werden.

2. Schreiben Sie den Kartenstil

Im obigen Code werden nur die Kartenmarkierungen und Koordinaten angezeigt. Wenn Sie das Erscheinungsbild der Karte verschönern möchten, müssen Sie einige Stile schreiben, um es zu steuern. Hier ist eine einfache Implementierungsmethode:

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

Es ​​ist zu beachten, dass die Höhe des Kartencontainers festgelegt werden muss, da er sonst nicht normal angezeigt werden kann.

2. Karten-Plug-ins von Drittanbietern verwenden

uniapp unterstützt auch die Verwendung von Karten-Plug-ins von Drittanbietern. Am Beispiel von AMAP müssen Sie zunächst relevante Parameter in main.js konfigurieren:

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

Verwenden Sie das amapPlugin-Plug-in in der Vue-Komponente:

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

Es ist zu beachten, dass die Verwendung eines Karten-Plug-ins eines Drittanbieters erforderlich ist in main.js zu konfigurieren und mit der Methode createAmap in der .vue-Komponente aufzurufen.

Zusammenfassung:

Es gibt zwei Möglichkeiten, Karten in Uniapp zu verwenden: Eine besteht darin, die mit Uniapp gelieferte Kartenkomponente zu verwenden, und die andere darin, ein Karten-Plug-In eines Drittanbieters zu verwenden. Wählen Sie je nach Bedarf die zu verwendende Methode. Unabhängig davon, welche Methode verwendet wird, müssen Sie zunächst ein gewisses Verständnis des Karten-Plug-Ins haben und mit der Aufrufmethode des Karten-Plug-Ins vertraut sein, um eine bessere Entwicklung zu ermöglichen.

Das obige ist der detaillierte Inhalt vonSo öffnen Sie die Karte in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!