uniapp을 사용하여 Baidu 지도를 만드는 방법-uni-app-php.cn

집

웹 프론트엔드

uni-app

uniapp을 사용하여 Baidu 지도를 만드는 방법

PHPz

Apr 18, 2023 pm 06:21 PM

모바일 기기의 인기로 인해 지도 기능은 많은 애플리케이션에서 필수 기능이 되었습니다. Baidu Maps는 중국에서 가장 널리 사용되는 지도 시스템 중 하나이며, uniapp은 Vue.js 기반의 크로스 플랫폼 프레임워크로, 동일한 코드 세트를 사용하여 iOS, Android, H5 등 여러 플랫폼용 애플리케이션을 작성할 수 있습니다. . 이번 글에서는 uniapp을 이용해 바이두 지도를 만드는 방법을 소개하겠습니다.

1. uniapp 프로젝트 만들기

먼저 HBuilderX를 설치한 다음 HBuilderX를 열고 새 프로젝트 만들기 -> uni-app을 선택해야 합니다. 기본정보를 입력한 후 생성을 클릭합니다.

둘째, 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' 
}

로그인 후 복사

여기서 "your appkey"는 적용된 Baidu Map AK입니다.

3. 지도 만들기

페이지 만들기

uniapp 프로젝트에서 페이지 폴더를 열고 새 지도 페이지를 만듭니다.

코드 작성

지도 페이지에서 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>

로그인 후 복사

코드 설명: