插件市场引用为 https://ext.dcloud.net.cn/plugin?id=615
插件引用后进行了部分修改
目录
index页面
<template>
<div>
<hchPosition :storeData="storeData" :markers="markers"></hchPosition>
</div>
<!-- <div class="content">
<map :scale='18' id="myMap" style="width: 100%;" :style="{height: mapHeight + 'px'}"
:markers="markers" enable-satellite="true" :longitude="longitude" :latitude="latitude" :circles="circles"></map>
</div> -->
</template>
<script>
//引用组件 uni-app中创建nvue文件
// import hchPosition from '@/components/hch-position/hch-position.vue'
import hchPosition from '@/components/hch-position/hch-position.nvue'
export default {
data() {
return {
latitude: 0,
longitude: 0,
circles: [],//圆
storeData: [ //门店信息展示 id name address tel 必填
{
id: 1,
name: '热源',
address: '热源1号站',
tel: '热源1号站：瞬时热量、瞬时流量、单耗',
},
{
id: 2,
name: '热源',
address: '热源2号站',
tel: '热源2号站：瞬时热量、瞬时流量、单耗',
}, {
id: 3,
name: '换热站',
address: '换热站1号',
tel: '换热站1：瞬时热量、瞬时流量、单耗',
},
],
markers: [ //门店在地图上的标记 以下字段必填
{
id: 1,
latitude: 39.03,
// latitude: 39.939203,
longitude: 116.210689,
iconPath: '/static/hch-position/ry1.png',
callout: {
content: "热源1号站",
borderRadius: 10,
padding: 10,
display: "ALWAYS",
}
}, {
id: 2,
latitude: 39.945441,
longitude: 116.217556,
iconPath: '/static/hch-position/ry2.png',
callout: {
content: "热源2号站",
borderRadius: 10,
padding: 10,
display: "ALWAYS",
}
},{
id: 3,
latitude: 39.8226,
longitude: 116.250166,
iconPath: '/static/hch-position/hrz1.png',
callout: {
content: "换热站1号",
borderRadius: 10,
padding: 10,
display: "ALWAYS",
}
}
],
}
},
components: {
hchPosition,
},
created() {
// this.getLocationInfo()
},
methods: {
// 获取地理位置
// getLocationInfo() {
// console.log(111)
// var that = this
// uni.getLocation({
// type: 'wgs84',
// success(res) {
// console.log(res, "当前位置");
// that.latitude = res.latitude
// that.longitude = res.longitude
// console.log(res.latitude+"——"+res.longitude)
// //标记点
// that.markers = [{
// id: 1,
// latitude: res.latitude,
// longitude: res.longitude,
// iconPath: '/static/hch-position/wd.png',
// }]
// that.circles = [{ //在地图上显示圆
// latitude: res.latitude,
// longitude: res.longitude,
// fillColor: "#D9E6EF", //填充颜色
// color: "#A7B6CB", //描边的颜色
// radius: 50, //半径
// strokeWidth: 2 //描边的宽度
// }]
// }
// });
// },
}
}
</script>
<style>
</style>
组件页面 【创建nvue文件】
<template>
<div>
<div class="page-body">
<div class="page-section page-section-gap">
<map id="myMap" style="width: 100%; height: 300px;" show-compass="true" enable-satellite="true"
:latitude="latitude" @anchorpointtap="anchorpointtap" :longitude="longitude" :markers="markers"
show-location="true" enable-scroll enable-zoom @tap="bindtap" :circles="circles"
@callouttap="callouttap" @regionchange="regionchange" @updated="updated">
</map>
</div>
<div class="store-tips">
<div class="store-des-box" v-if="storeFlag" @tap="storeDesEvn">
<image class="store-img" :src="storemark"></image>
<!-- <image class="store-img" src="/static/img/dzd.png"></image> -->
<div class="store-des">
<div class="store-name">{{store.name}}</div>
<div class="store-address">地址:{{store.address}}</div>
<div class="store-tel">电话:{{store.tel}}</div>
</div>
</div>
</div>
<div class="near-num">距离最近的门店{{distanceL}}千米</div>
<!-- <image class="address-icon" src="/static/Home.png"></image> -->
</div>
</div>
</template>
<script>
export default {
props: {
storeData: {
type: Array,
},
markers: {
type: Array,
}
},
data() {
return {
store: {},
storeFlag: false,
storeAdFlag: true,
distanceL: 0, //附近店门的距离
latitude: 39,
longitude: 116,
circles: [], //圆
controls: [],
storemark: {},
}
},
watch: {
latitude(val) {
this.latitude = val
},
longitude(val) {
this.longitude = val
}
},
mounted() {
console.log(this.latitude)
console.log(this.markers)
this.getLocationInfo()
},
methods: {
getLocationInfo() {
console.log(111)
var that = this
uni.getLocation({
type: 'wgs84',
success(res) {
console.log(res, "当前位置");
that.latitude = res.latitude
that.longitude = res.longitude
console.log(res.latitude + "——" + res.longitude)
//标记点
that.markers.push({
id: 1,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '/static/hch-position/wddw.png',
})
that.circles = [{ //在地图上显示圆
latitude: res.latitude,
longitude: res.longitude,
fillColor: "#D9E6EF", //填充颜色
color: "#A7B6CB", //描边的颜色
radius: 50, //半径
strokeWidth: 2 //描边的宽度
}]
}
});
},
// 点击了门店信息
storeDesEvn() {
uni.showToast({
title: "自己自定义跳门店详情页介绍",
duration: 2000,
icon: "none"
})
},
// 点击气泡
callouttap(e) {
this.storeFlag = true
this.storeAdFlag = false
for (let i = 0; i < this.storeData.length; i++) {
const ele = this.storeData[i]
// debugger
console.log(e.detail.markerId)
if (ele.id == e.detail.markerId) {
this.store = ele
this.storemark = this.markers[i].iconPath
break
}
}
},
anchorpointtap(e) {
console.log(666666666666666)
console.log(e.detail)
},
// 点击地图
bindtap(id) {
this.storeFlag = false
// this.storeAdFlag=true;
},
// 隐藏广告图片
// hideAd() {
// this.storeAdFlag = false
// },
updated() {
},
// 改变视野时改变经纬度
regionchange(e) {
let _this = this
// 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。
// var mapCtx = wx.createMapContext("myMap", this)
var mapCtx = uni.createMapContext("myMap", this)
mapCtx.getCenterLocation({
success: function(res) {
_this.centerLatitude = res.latitude
_this.centerLongitude = res.longitude
_this.nearDistance(
_this.markers,
_this.centerLatitude,
_this.centerLongitude
)
},
fail: function(res) {
console.log(res)
}
}) //获取当前地图的中心经纬度
},
// 两点间距离
distance(la1, lo1, la2, lo2) {
var La1 = (la1 * Math.PI) / 180.0
var La2 = (la2 * Math.PI) / 180.0
var La3 = La1 - La2
var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
var s =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(La3 / 2), 2) +
Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
)
)
s = s * 6378.137 //地球半径
s = Math.round(s * 10000) / 10000
return s
},
// 计算最近的距离
nearDistance(array, centerLatitude, centerLongitude) {
let temp = []
for (let i = 0, l = array.length; i < l; i++) {
const element = array[i]
let d = this.distance(
element.latitude,
element.longitude,
centerLatitude,
centerLongitude
)
temp.push(d)
}
this.distanceL = Math.min.apply(null, temp)
}
},
onShow() {},
onReady() {}
}
</script>
<style lang="scss" scoped>
.content {
text-align: center;
height: 400rpx;
}
.page-section {
z-index: 0;
}
.store-tips {
width: 600rpx;
height: 100rpx;
margin: 10rpx auto;
border-radius: 10rpx;
position: absolute;
top: 10rpx;
left: 50%;
transform: translate(-50%, 0);
z-index: 2;
overflow: hidden;
.store-des-box {
background: #fff;
}
.store-img {
width: 80rpx;
height: 80rpx;
border-radius: 10rpx;
margin: 10rpx;
float: left;
}
.store-des {
padding-top: 8rpx;
float: left;
line-height: 1;
font-size: 22rpx;
color: #666;
padding-left: 20rpx;
.store-name {
font-weight: 600;
color: deeppink;
}
}
.store-clear {
width: 30rpx;
height: 30rpx;
position: absolute;
top: 7rpx;
right: 7rpx;
margin: 30rpx;
}
}
.address-icon {
width: 38rpx;
height: 40rpx;
position: absolute;
top: 22%;
left: 50%;
z-index: 2;
margin-bottom: -20rpx;
margin-left: -20rpx;
}
.near-num {
padding: 10rpx 20rpx;
border-radius: 10rpx;
position: absolute;
top: 17%;
left: 50%;
z-index: 2;
font-size: 24rpx;
background: #fff;
transform: translate(-50%, 0);
}
</style>
生成高德地图Key
上述代码调试是可以定位到当前位置的，如需发布后仍需定位 则需要申请key
发布版安全码SHA1
应用打包时使用证书的指纹字符串（SHA1）
HBuilderX云端打包选择“使用自有证书”或本地离线打包时，填写应用使用证书的SHA1，查看证书的信息获取指纹中SHA1值，参考：https://ask.dcloud.net.cn/article/35777#keyinfo
HBuilderX云端打包选择“公共测试证书”时，SHA1值为：BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7，详情参考：https://ask.dcloud.net.cn/article/36522
HBuilderX云端打包选择“老版本DCloud公用证书”时，SHA1值为：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58，详情参考：https://ask.dcloud.net.cn/article/36522
注意：必须添写实际打包使用证书的SHA1值，否则可能无法显示地图或无法定位
申请高德地图key时 PackageName为您打包时的包名
版权声明：本文为weixin_42120669原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。