Comment créer une carte Baidu à l'aide d'uniapp

Avec la popularité des appareils mobiles, les fonctions cartographiques sont devenues indispensables pour de nombreuses applications. Baidu Maps est l'un des systèmes cartographiques les plus utilisés en Chine, et uniapp est un framework multiplateforme basé sur Vue.js, qui peut utiliser le même ensemble de codes pour écrire des applications pour plusieurs plateformes telles que iOS, Android et H5. . Cet article explique comment utiliser Uniapp pour créer une carte Baidu.

1. Créez le projet uniapp

Vous devez d'abord installer HBuilderX, puis ouvrir HBuilderX et choisir de créer un nouveau projet -> uni-app. Après avoir rempli les informations de base, cliquez sur Créer.

Deuxièmement, présentez Baidu Map

1. Ajoutez le composant ivi-baidumap

Entrez dans le projet uniapp, ouvrez main.js, introduisez le composant ivi-baidumap

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

2. Définissez la clé

Dans le projet uniapp, ouvrez le fichier config .js, ajoutez le contenu suivant :

baiduMap:{
    ak:'your appkey' 
}

où "votre clé d'application" est la Baidu Map AK appliquée.

3. Créer une carte

1. Créer une page

Dans le projet uniapp, ouvrez le dossier pages et créez une nouvelle page de carte.

2. Écrivez le code

Dans la page de la carte, ouvrez index.vue et écrivez le code suivant :

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

Explication du code :

• ivi-baidumap : l'étiquette du composant de la carte Baidu
• id : l'identifiant unique de la carte
• latitude, longitude : la position du point central (dimension, précision) initialement affichée sur la carte
• markers : tableau de points marqueurs, utilisés pour marquer des emplacements sur la carte
• BMap.Map : créer une instance de carte et transmettre dans l'identifiant unique de la carte
• BMap.Point : Créez une instance de point pour représenter la position du point central de la carte
• map.centerAndZoom : Définissez le point central de la carte et le taux de zoom
• map.enableScrollWheelZoom : Activez la molette de la souris sur la carte zoom
• map.addControl : Ajouter des contrôles (navigation, échelle)

Une fois l'écriture terminée, exécutez le projet uniapp et vous pourrez voir la carte Baidu créée.

4. Résumé

Cet article explique comment créer Baidu Map dans uniapp et explique les codes clés en détail. Grâce aux étapes ci-dessus, vous pouvez facilement mettre en œuvre la fonction de carte mobile. Bien sûr, il reste encore de nombreux détails auxquels il faut prêter attention dans l’utilisation réelle, et nous avons besoin d’études et de pratiques plus approfondies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!