cansnow
155 lines
3.5 KiB
Vue
155 lines
3.5 KiB
Vue
<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> |