uniappを使って百度地図を作成する方法-uni-app-php.cn

ホームページ

ウェブフロントエンド

uni-app

uniappを使って百度地図を作成する方法

PHPz

Apr 18, 2023 pm 06:21 PM

モバイルデバイスの普及に伴い、地図機能は多くのアプリケーションにとって必須のものになりました。 Baidu Maps は中国で最も広く使用されている地図システムの 1 つであり、uniapp は Vue.js に基づくクロスプラットフォームフレームワークであり、同じコードセットを使用して iOS、Android、H5 などの複数のプラットフォーム用のアプリケーションを作成できます。。この記事ではuniappを使って百度地図を作成する方法を紹介します。

1. uniapp プロジェクトを作成する

まず、HBuilderX をインストールし、次に HBuilderX を開いて、新しいプロジェクトの作成 -> uni-app を選択する必要があります。基本情報を入力したら、「作成」をクリックします。

2. Baidu Map の導入

ivi-baidumap コンポーネントの追加

uniapp プロジェクトに入り、main.js を開いて、ivi-baidumap コンポーネントを導入します。

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

ログイン後にコピー

キーを設定します

uniapp プロジェクトで、ファイル config.js を開き、次の内容を追加します:

baiduMap:{
    ak:'your appkey' 
}

ログイン後にコピー

where "your appkey 」はBaidu Map AKに申請したものです。

3. マップの作成

ページの作成

uniapp プロジェクトで、pages フォルダーを開いて、新しいマップページを作成します。

コードの記述

マップページで、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>

ログイン後にコピー

コードの説明: