13
This commit is contained in:
cansnow
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="map_container"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
centerMarker: null,
|
||||
currentPoint: null,
|
||||
currentAddress: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.createMap();
|
||||
this.initializeMap();
|
||||
},
|
||||
methods: {
|
||||
createMap() {
|
||||
const mapId = "map_" + Math.random();
|
||||
const map = plus.maps.create(mapId, {
|
||||
zoom: 13,
|
||||
MapType: plus.maps.MapType.MAPTYPE_NORMAL,
|
||||
traffic: true,
|
||||
zoomControls: true,
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: "static",
|
||||
});
|
||||
|
||||
plus.webview.currentWebview().append(map);
|
||||
this.map = map;
|
||||
},
|
||||
|
||||
initializeMap() {
|
||||
const _this = this;
|
||||
|
||||
// 获取当前位置
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success(res) {
|
||||
const point = new plus.maps.Point(res.longitude, res.latitude);
|
||||
_this.map.setCenter(point);
|
||||
_this.currentPoint = point;
|
||||
_this.addCenterMarker(point);
|
||||
_this.getAddressByPoint(point);
|
||||
_this.setupMapMoveListener();
|
||||
_this.map.show();
|
||||
},
|
||||
fail() {
|
||||
// 如果获取位置失败，使用默认位置
|
||||
const defaultPoint = new plus.maps.Point(116.4074, 39.9042);
|
||||
_this.map.setCenter(defaultPoint);
|
||||
_this.currentPoint = defaultPoint;
|
||||
_this.addCenterMarker(defaultPoint);
|
||||
_this.getAddressByPoint(defaultPoint);
|
||||
_this.setupMapMoveListener();
|
||||
_this.map.show();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addCenterMarker(point) {
|
||||
// 移除旧的marker
|
||||
if (this.centerMarker) {
|
||||
this.map.removeOverlay(this.centerMarker);
|
||||
}
|
||||
|
||||
// 添加中心点marker
|
||||
this.centerMarker = new plus.maps.Marker(point);
|
||||
this.centerMarker.setIcon("/static/images/chat/marker.png");
|
||||
this.map.addOverlay(this.centerMarker);
|
||||
},
|
||||
|
||||
setupMapMoveListener() {
|
||||
const _this = this;
|
||||
|
||||
// 使用定时器轮询来检测地图位置变化
|
||||
// plus.maps 的 H5 版本可能不支持事件监听，通过定时器实现
|
||||
let lastCenter = this.map.getCenter ? this.map.getCenter() : null;
|
||||
|
||||
setInterval(() => {
|
||||
_this.map.getCurrentCenter((state, point) => {
|
||||
if (state !== 0 || !point) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 简单的位置变化检测
|
||||
if (!lastCenter ||
|
||||
lastCenter.getLng() !== point.getLng() ||
|
||||
lastCenter.getLat() !== point.getLat()) {
|
||||
|
||||
lastCenter = point;
|
||||
_this.updateCenterMarker();
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
|
||||
updateCenterMarker() {
|
||||
const _this = this;
|
||||
|
||||
this.map.getCurrentCenter((state, point) => {
|
||||
if (state !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this.currentPoint = point;
|
||||
_this.addCenterMarker(point);
|
||||
_this.getAddressByPoint(point);
|
||||
});
|
||||
},
|
||||
|
||||
getAddressByPoint(point) {
|
||||
const _this = this;
|
||||
|
||||
// 简化处理：直接显示"位置已选择"，不调用外部 API
|
||||
// 如果需要真实地址，可以在确认时调用服务端 API
|
||||
_this.currentAddress = '位置已选择';
|
||||
},
|
||||
|
||||
getCurrentCenter(callback) {
|
||||
const _this = this;
|
||||
|
||||
this.map.getCurrentCenter((state, point) => {
|
||||
if (state !== 0) {
|
||||
callback(state, null);
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接返回当前数据，地址会异步更新
|
||||
callback(state, {
|
||||
point: point,
|
||||
lng: point.getLng(),
|
||||
lat: point.getLat(),
|
||||
address: _this.currentAddress || '位置已选择'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
+59
-23
@@ -1,18 +1,27 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-mask :show="previewVideoFlag" :custom-style="customMaskStyle">
|
||||
<view @tap.stop class="playBox" :style="'height:'+(winHeight/10*9)+'px;width:'+(winWidth-20)+'px;'">
|
||||
<video :style="'height:'+(winHeight/10*8)+'px;width:'+(winWidth-20)+'px'"
|
||||
:controls="true" :show-fullscreen-btn="false" :autoplay="true"
|
||||
:src="previewVideoSrc" @ended="quitPlay()">
|
||||
<u-button hover-class="none" @click="quitPlay()">关闭</u-button>
|
||||
</video>
|
||||
<view class="quitBox">
|
||||
<u-button hover-class="none" @click="quitPlay()">关闭</u-button>
|
||||
</view>
|
||||
<u-overlay
|
||||
v-if="previewVideoFlag"
|
||||
:show="previewVideoFlag"
|
||||
opacity="1"
|
||||
:custom-style="customMaskStyle">
|
||||
<view @tap.stop
|
||||
class="playBox"
|
||||
style="height:100vh;width:100vw;">
|
||||
<video
|
||||
v-if="previewVideoFlag"
|
||||
:style="{height:videoHeight+'vw',width:'100vw'}"
|
||||
:controls="true"
|
||||
:show-fullscreen-btn="false"
|
||||
:autoplay="true"
|
||||
:src="previewVideoSrc"
|
||||
@ended="play_end">
|
||||
</video>
|
||||
<view class="quitBox" @click="quitPlay">
|
||||
<u-icon name="close-circle" color="#FFF" size="32"></u-icon>
|
||||
<cover-view class="icon"></cover-view>
|
||||
</view>
|
||||
</u-mask>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -36,22 +45,40 @@
|
||||
display:"flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
//paddingTop:'100rpx',
|
||||
border:'1px solid red',
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
alignItems: "center"
|
||||
},
|
||||
videoHeight:100,
|
||||
winHeight:0,
|
||||
winWidth:0
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
previewVideoSrc(nv,ov){
|
||||
const _this = this;
|
||||
console.log(nv,ov);
|
||||
if(nv && nv != ov){
|
||||
uni.getVideoInfo({
|
||||
src:nv,
|
||||
success(res) {
|
||||
_this.videoHeight = res.width/ res.height * 100;
|
||||
},
|
||||
complete(res) {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
this.winHeight=this.$u.sys().windowHeight;
|
||||
this.winWidth=this.$u.sys().windowWidth;
|
||||
},
|
||||
methods:{
|
||||
play_end(res){
|
||||
console.log(res);
|
||||
},
|
||||
quitPlay:function(){
|
||||
console.log('quit');
|
||||
this.$emit("quitPlay");
|
||||
}
|
||||
}
|
||||
@@ -60,12 +87,21 @@
|
||||
|
||||
<style lang="scss">
|
||||
.playBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.quitBox{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
right: 5%;
|
||||
top: 10%;
|
||||
.icon{
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
font-family: uicon-iconfont;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user