How to create Baidu map using uniapp

With the popularity of mobile devices, map functions have become a must-have for many applications. Baidu Maps is one of the most widely used map systems in China, and uniapp is a cross-platform framework based on Vue.js, which can use the same set of code to write applications for multiple platforms such as iOS, Android, and H5. This article will introduce how to use uniapp to create a Baidu map.

1. Create a uniapp project

First you need to install HBuilderX, then open HBuilderX and choose to create a new project -> uni-app. After filling in the basic information, click Create.

2. Introduce Baidu Map

1. Add ivi-baidumap component

Enter the uniapp project, open main.js, and introduce ivi-baidumap component

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

2. Set the key

In the uniapp project, open the file config.js and add the following content:

baiduMap:{
    ak:'your appkey' 
}

where "your appkey" is the one you applied for Baidu Map AK.

3. Create a map

1. Create a page

In the uniapp project, open the pages folder and create a new map page.

2. Writing code

In the map page, open index.vue and write the following 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>

Code explanation:

• ivi-baidumap: component tag of Baidu map
• id: unique identifier of the map
• latitude, longitude: center point position (dimension, accuracy) initially displayed on the map
• markers: Array of marker points, used to mark locations on the map
• BMap.Map: Create a map instance, pass in the unique identifier of the map
• BMap.Point: Create a point instance , indicating the center point position of the map
• map.centerAndZoom: Set the map center point and zoom ratio
• map.enableScrollWheelZoom: Enable map mouse wheel zoom
• map.addControl: Add Controls (navigation, scale)

After writing is completed, run the uniapp project to see the created Baidu map.

4. Summary

This article introduces how to create Baidu Map in uniapp and explains the key codes in detail. Through the above steps, you can easily implement the mobile map function. Of course, there are still many details to pay attention to in actual use, and we need further study and practice.

The above is the detailed content of How to create Baidu map using uniapp. For more information, please follow other related articles on the PHP Chinese website!