如何使用uniapp創建百度地圖

隨著行動裝置的普及，地圖功能已成為許多應用的必備項目。百度地圖是國內使用最廣泛的地圖系統之一，而uniapp是一種基於Vue.js的跨平台框架，可以使用同一套程式碼編寫iOS、Android、H5等多個平台的應用程式。本文將介紹如何使用uniapp建立百度地圖。

一、建立uniapp專案

首先需要安裝HBuilderX，然後開啟HBuilderX，選擇建立新專案 -> uni-app。填寫基本資料後，點擊建立即可。

二、引入百度地圖

1. 新增ivi-baidumap元件

進入uniapp項目，開啟main.js，引入ivi-baidumap元件

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

2. 設定金鑰

在uniapp專案中，開啟檔案config.js，新增下列內容：

baiduMap:{
    ak:'your appkey' 
}

其中「your appkey」為申請的百度地圖AK。

三、建立地圖

1. 建立頁面

在uniapp專案中，開啟pages資料夾，新建一個地圖頁面。

2. 寫程式碼

在地圖頁面中，開啟index.vue，寫如下程式碼：

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

程式碼解釋：

• ivi-baidumap：百度地圖的元件標籤
• id：地圖的唯一識別碼
• latitude、longitude：地圖初始顯示的中心點位置（維度、精度）
• markers：標記點數組，用來在地圖上標記位置
• BMap.Map：建立地圖實例，傳入地圖的唯一識別碼
• BMap.Point：建立點實例，表示地圖的中心點位置
• map.centerAndZoom：設定地圖中心點和縮放比例
• map.enableScrollWheelZoom：開啟地圖滑鼠滾輪縮放
• #map.addControl：添加控制項（導航、比例尺）

寫完成後，執行uniapp項目，即可看到已建立的百度地圖。

四、總結

本文介紹如何在uniapp中建立百度地圖，並對關鍵程式碼進行了詳細的解釋。透過以上步驟，可以輕鬆實現行動端地圖功能。當然，實際使用上還有很多細節需要注意，我們需要進一步的學習和實踐。

以上是如何使用uniapp創建百度地圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！