So erstellen Sie eine Baidu-Karte mit Uniapp

Mit der Popularität mobiler Geräte sind Kartenfunktionen für viele Anwendungen zu einem Muss geworden. Baidu Maps ist eines der am weitesten verbreiteten Kartensysteme in China, und uniapp ist ein plattformübergreifendes Framework auf Basis von Vue.js, das mit demselben Codesatz Anwendungen für mehrere Plattformen wie iOS, Android und H5 schreiben kann . In diesem Artikel wird erläutert, wie Sie mit Uniapp eine Baidu-Karte erstellen.

1. Erstellen Sie das Uniapp-Projekt

Zuerst müssen Sie HBuilderX installieren, dann HBuilderX öffnen und „Neues Projekt erstellen“ -> „Uni-App“ auswählen. Nachdem Sie die grundlegenden Informationen eingegeben haben, klicken Sie auf Erstellen.

Zweitens Baidu Map vorstellen

1. Fügen Sie die ivi-baidumap-Komponente hinzu

Geben Sie das Uniapp-Projekt ein, öffnen Sie main.js, stellen Sie die ivi-baidumap-Komponente vor

import iviBaidumap from '@/components/ivi-baidumap/ivi-baidumap.vue'
Vue.component('ivi-baidumap', iviBaidumap)

2. Legen Sie den Schlüssel fest

Im Uniapp-Projekt Öffnen Sie die Datei config.js und fügen Sie den folgenden Inhalt hinzu:

baiduMap:{
    ak:'your appkey' 
}

wobei „Ihr App-Schlüssel“ die angewendete Baidu Map AK ist.

3. Erstellen Sie eine Karte

1. Erstellen Sie eine Seite

Öffnen Sie im Uniapp-Projekt den Ordner „Seiten“ und erstellen Sie eine neue Kartenseite.

2. Code schreiben

Öffnen Sie auf der Kartenseite index.vue und schreiben Sie den folgenden Code:

<template>
    <view style="width:100%;height:100%">
        <ivi-baidumap :id="&#39;mapid&#39;" :latitude="latitude" :longitude="longitude" :markers="markers" @click="onMapClick" @markertap="onMarkerTap"></ivi-baidumap>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                latitude:"",
                longitude:"",
                markers:[{
                    id:0,
                    latitude:39.916666,
                    longitude:116.383333,
                    iconPath:"../../static/imgs/marker_red.png",
                    width:20,
                    height:20,
                    callout:{
                        content:"第一个标记点"
                    },
                    title:"点1"
                },{
                    id:1,
                    latitude:39.906666,
                    longitude:116.375555,
                    iconPath:"../../static/imgs/marker_blue.png",
                    width:20,
                    height:20,
                    callout:{
                        content:"第二个标记点"
                    },
                    title:"点2"
                }]
            }
        },
        mounted() {
            this.$refs.mapid.getBaiduMapSdk((BMap) => {
                let map = new BMap.Map('mapid');
                let point = new BMap.Point(116.384615, 39.910937);
                map.centerAndZoom(point, 15);
                map.enableScrollWheelZoom(true);
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
            })
        },
        methods: {
            onMapClick() {
                console.log("onMapClick")
            },
            onMarkerTap(marker) {
                console.log("onMarkerTap", marker)
            }
        }
    }
</script>

Codeerklärung:

• ivi-baidumap: die Komponentenbezeichnung der Baidu-Karte
• id: die eindeutige Kennung von die Karte
• Breitengrad, Längengrad: die Mittelpunktposition (Dimension, Genauigkeit), die ursprünglich auf der Karte angezeigt wurde
• Marker: Array von Markierungspunkten, die zum Markieren von Standorten auf der Karte verwendet werden
• BMap.Map: Erstellen Sie eine Karteninstanz und übergeben Sie sie in der eindeutigen Kennung der Karte
• BMap.Point: Erstellen Sie eine Punktinstanz, um die Mittelpunktposition der Karte darzustellen
• map.centerAndZoom: Legen Sie den Kartenmittelpunkt und das Zoomverhältnis fest
• map.enableScrollWheelZoom: Aktivieren Sie das Mausrad der Karte zoom
• map.addControl: Steuerelemente hinzufügen (Navigation, Skalierung)

Nachdem der Schreibvorgang abgeschlossen ist, führen Sie das Uniapp-Projekt aus und Sie können die erstellte Baidu-Karte sehen.

4. Zusammenfassung

Dieser Artikel stellt vor, wie man eine Baidu-Karte in Uniapp erstellt, und erklärt die Schlüsselcodes im Detail. Mit den oben genannten Schritten können Sie die mobile Kartenfunktion einfach implementieren. Natürlich gibt es bei der tatsächlichen Verwendung noch viele Details zu beachten, und wir müssen noch mehr lernen und üben.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Baidu-Karte mit Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!