1.打開manifest.json文件 —— 選擇App模板配置 —— 選擇Map

—— 你看你需要用那個地圖 就選那個 對應(yīng)填寫 key 我用的是高德地圖

image.png

2.獲取當(dāng)前位置 這個做的一個簽到功能的 map

<template>
    <view class="index-sign-up bg-ff">
        <view class="map">
            <map id="map" class="" :show-location="true" :latitude="latitude" :longitude="longitude" :markers="covers"
                :scale="14" :enable-building="true" v-show="mapshow == true" >
            </map>
        </view>
        <view class="map-bottom u-rela u-p-t-210 width-100 u-flex u-flex-col u-col-center">
            <view class="sign-btn border-50 u-flex u-flex-col u-col-center u-row-center bg-1a5fff-6572ff border-4px-solid-C4D5FF"
                @click="onSign()">
                <view class="cor-ff font-20px u-m-b-5">簽到</view>  
                <view class="cor-ff font-16px">09:00:02</view>
            </view>
            <!-- 判斷當(dāng)前位置是否在 圍欄外-->
            <view class="u-flex u-row-center u-col-center u-m-t-36">
                <view class="font-13px"><text class="iconfont icon-weizhi1 font-18px u-m-r-8"></text> 當(dāng)前位置：</view>
                <view class="font-16px cor-FD2121">圍欄外</view>
            </view>    
        </view>   
    </view>
</template>

<script>
   export default {
        data() {
            return {
        mapshow:true,//是否顯示 map
                latitude:0,
                longitude:0,
                
                covers: [{
                    address: '廣東省深圳市南山區(qū)沙河街道星河街社區(qū)僑城西街',
                    title: '深圳歡樂谷',
                    id: 11,
                    latitude: 22.545809,
                    longitude: 113.985274,
                    iconPath: "/static/img/wz.png", //圖標(biāo)路徑  圖標(biāo)路徑需要后臺生成
                    width: 29,
                    height: 29,
                    callout: { //marker氣泡
                        content: '深圳歡樂谷',
                        bgColor: "rgba(255,255,255,0.71)",
                        borderRadius: 4,
                        padding:8,
                        fontSize: 16,
                        color: "#000000",
                        textAlign: "center",
                        display: 'ALWAYS',
                        x:110,
                        y:110
                    },
                    label: {
                        content: '深圳歡樂谷',
                        bgColor: "rgba(255,255,255,0.71)",
                        borderWidth: 1,
                        borderColor: '#A5A5A5',
                        borderRadius: 4,
                        padding: 8,
                        fontSize: 16,
                        color: "#000000",
                        textAlign: "center",
                        x: 0,
                        y: 0,
                        anchorX: 0,
                        anchorY: 0
                    }
                }],
            }
        },
        watch:{
            tan_show(newname){
                if(newname == true){
                    this.mapshow = false;
                }else{ 
                    this.mapshow = true;
                }
            },
        },
        onLoad() {
            uni.getLocation({
                type: 'gcj02',
                // #ifdef APP
                geocode:true,
                // #endif
                success:(res)=> {
                    console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
                    console.log('當(dāng)前位置的緯度：' + res.latitude);
                    this.showToast(JSON.stringify(res));
                    this.latitude = res.latitude;
                    this.longitude = res.longitude;
                },
                complete: (res) => {
                    console.log(res);
                }
            });
        },
        onShow() {
            
        },
        
        methods: {
            /* 點擊 簽到 */
            onSign(){
            },
        }
    }
</script>

<style lang="scss" scoped>
    .index-sign-up {
        width: 100%;
        height:100vh;
        overflow: hidden;
        .map ,map{
            width: 100%;
            /* #ifdef APP */
                height: 50vh;
            /* #endif  */
            
            /* #ifdef H5 */
            height: 80vh;
            /* #endif  */
        }
        .map-bottom {
            /* #ifdef APP */
                height: 40vh;
                background: #fff;
            /* #endif  */
            
            /* #ifdef H5 */
            margin-top: -40vh;
            height: 60vh;
            background: linear-gradient(360deg,#ffffff 60%, rgba(255,255,255,0) 100%);
            /* #endif  */
            .sign-btn{
                width:200rpx;
                height:200rpx;
            }
        }
        
    }
</style>

3.使用高德地圖，需要有高德地圖賬號;

4.獲取高德地圖key

• 1.登錄高德以后，點擊控制臺 選擇應(yīng)用管理 點擊創(chuàng)建新應(yīng)用

如圖：

1654589319675.png

• 2.創(chuàng)建新應(yīng)用以后，點擊添加 對應(yīng)選擇和填寫需要獲取 key
• 2.1注意：使用HBuilder X 打包 如果使用的是 公共測試證書 和 云端證書其中的一種，盡量Android的包名 使用 HBuilderX 自定義的包名。有可能會出現(xiàn)包名不一致 導(dǎo)致獲取的高德key 會 錯誤 key鑒權(quán)失敗
• 2.2 如果想自定義包名，如果有以前使用地圖的打包記錄 ，切記 先刪除項目當(dāng)中的 unpackage

如圖：

1654589465332.png

5. 使用的是云端證書 獲取 sha1

1.登錄DCloud開發(fā)者中心
2.登錄成功以后 會顯示 如圖：

image.png

3.點擊對應(yīng)的應(yīng)用名稱 —— 選擇應(yīng)用證書管理 —— 選擇證書詳情
—— 就會 顯示 對應(yīng) sha1
如圖1：

image.png

如圖2：

image.png

6.使用公共測試證書 以及 只自有證書 獲取 sha1

敬請期待...