Cara membuat peta Baidu menggunakan uniapp

Dengan populariti peranti mudah alih, fungsi peta telah menjadi satu kemestian untuk banyak aplikasi. Peta Baidu ialah salah satu sistem peta yang paling banyak digunakan di China, dan uniapp ialah rangka kerja merentas platform berdasarkan Vue.js, yang boleh menggunakan set kod yang sama untuk menulis aplikasi untuk berbilang platform seperti iOS, Android dan H5 . Artikel ini akan memperkenalkan cara menggunakan uniapp untuk membuat peta Baidu.

1 Cipta projek uniapp

Mula-mula anda perlu memasang HBuilderX, kemudian buka HBuilderX dan pilih untuk mencipta projek baharu -> Selepas mengisi maklumat asas, klik Buat.

2. Perkenalkan Peta Baidu

1. Tambah komponen ivi-baidumap

Masukkan projek uniapp, buka main.js, dan perkenalkan ivi- komponen baidumap

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

2. Tetapkan kunci

Dalam projek uniapp, buka fail config.js dan tambah kandungan berikut:

baiduMap:{
    ak:'your appkey' 
}

di mana "kunci aplikasi anda " ialah AK Peta Baidu yang dipohon.

3. Buat peta

1. Buat halaman

Dalam projek uniapp, buka folder halaman dan buat halaman peta baharu.

2. Tulis kod

Dalam halaman peta, buka index.vue dan tulis kod berikut:

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

Penjelasan kod:

• ivi-baidumap: teg komponen peta Baidu
• id: pengecam unik peta
• latitud, longitud: kedudukan titik tengah (dimensi, ketepatan) bagi permulaan peta paparan
• penanda: Tatasusunan titik penanda, digunakan untuk menandakan lokasi pada peta
• BMap.Map: Buat contoh peta, masukkan pengecam unik peta
• BMap.Point: Buat contoh Titik, menunjukkan kedudukan titik tengah peta
• map.centerAndZoom: Tetapkan titik tengah peta dan nisbah zum
• map.enableScrollWheelZoom: Dayakan zum roda tetikus peta
• map.addControl : Tambah kawalan (navigasi, skala)

Selepas penulisan selesai, jalankan projek uniapp dan anda boleh melihat peta Baidu yang dibuat.

4. Ringkasan

Artikel ini memperkenalkan cara membuat Peta Baidu dalam uniapp dan menerangkan kod utama secara terperinci. Melalui langkah di atas, anda boleh melaksanakan fungsi peta mudah alih dengan mudah. Sudah tentu, masih terdapat banyak butiran yang perlu diberi perhatian dalam penggunaan sebenar, dan kami memerlukan kajian dan latihan lanjut.

Atas ialah kandungan terperinci Cara membuat peta Baidu menggunakan uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!