1.打开manifest.json文件 —— 选择App模板配置 —— 选择Map
—— 你看你需要用那个地图 就选那个 对应填写 key 我用的是高德地图
image.png
2.获取当前位置 这个做的一个签到功能的 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>
<!-- 判断当前位置是否在 围栏外-->
<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> 当前位置：</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: '广东省深圳市南山区沙河街道星河街社区侨城西街',
title: '深圳欢乐谷',
id: 11,
latitude: 22.545809,
longitude: 113.985274,
iconPath: "/static/img/wz.png", //图标路径 图标路径需要后台生成
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('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + 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.登录高德以后，点击控制台 选择应用管理 点击创建新应用
如图：
1654589319675.png
- 2.创建新应用以后，点击添加 对应选择和填写需要获取 key
- 2.1注意：使用HBuilder X 打包 如果使用的是 公共测试证书 和 云端证书其中的一种，尽量Android的包名 使用 HBuilderX 自定义的包名。有可能会出现包名不一致 导致获取的高德key 会 错误 key鉴权失败
- 2.2 如果想自定义包名，如果有以前使用地图的打包记录 ，切记 先删除项目当中的 unpackage
如图：1654589465332.png
5. 使用的是云端证书 获取 sha1
1.登录DCloud开发者中心
2.登录成功以后 会显示 如图：
image.png
3.点击对应的应用名称 —— 选择应用证书管理 —— 选择证书详情
—— 就会 显示 对应 sha1
如图1：
image.png
如图2：
image.png
6.使用公共测试证书 以及 只自有证书 获取 sha1
敬请期待...
