From e1b028d486713eaf55aaf35fbf334aa568059c0d Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 14 四月 2026 15:46:54 +0800
Subject: [PATCH] 项目复制
---
src/views/h5/signup/BaiduMap.vue | 133 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 133 insertions(+), 0 deletions(-)
diff --git a/src/views/h5/signup/BaiduMap.vue b/src/views/h5/signup/BaiduMap.vue
new file mode 100644
index 0000000..68d0b3d
--- /dev/null
+++ b/src/views/h5/signup/BaiduMap.vue
@@ -0,0 +1,133 @@
+<template>
+ <div class="map-wrapper">
+ <div ref="mapContainer" class="map-container"></div>
+ </div>
+</template>
+
+<script>
+let baiduMapPromise = null;
+
+function loadBaiduMapScript() {
+ const ak = 'H4IN9QhFD5mC72tJEvbZysO7SKf0vDMa';
+ if (window.BMapGL) {
+ return Promise.resolve();
+ }
+ if (baiduMapPromise) {
+ return baiduMapPromise;
+ }
+ baiduMapPromise = new Promise((resolve, reject) => {
+ window.__baidu_map_callback = function() {
+ delete window.__baidu_map_callback; // 娓呯悊鍏ㄥ眬鍥炶皟
+ resolve();
+ };
+ const script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = `//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=__baidu_map_callback`;
+ script.onerror = (error) => {
+ delete window.__baidu_map_callback;
+ baiduMapPromise = null; // 鍏佽閲嶈瘯
+ reject(error);
+ };
+ document.body.appendChild(script);
+ });
+ return baiduMapPromise;
+}
+export default {
+ name: 'BaiduMap',
+ props: {
+ center: {
+ type: Object,
+ default: () => ({ lng: 0, lat: 0 })
+ },
+ },
+ data() {
+ return {
+ map: null,
+ zoom: 17,
+ userPosition: null
+ };
+ },
+ mounted() {
+ this.loadMap();
+ },
+ beforeUnmount() {
+ if (this.map) {
+ this.map.destroy();
+ this.map = null;
+ }
+ },
+ watch: {
+ center: {
+ handler: function(val) {
+ const newPoint = new BMapGL.Point(val.lng, val.lat);
+ this.map.map.setCenter(newPoint)
+ },
+ deep: true
+ }
+ },
+ methods: {
+ loadMap() {
+ loadBaiduMapScript()
+ .then(() => {
+ this.initMap();
+ })
+ .catch(err => {
+ this.$emit('getMapStatus', 'fail')
+ console.error('鍦板浘鑴氭湰鍔犺浇澶辫触:', err);
+ });
+ },
+ initMap() {
+ const container = this.$refs.mapContainer;
+ if (!container) return;
+ const map = new BMapGL.Map(container);
+ const point = new BMapGL.Point(this.center.lng, this.center.lat);
+ map.centerAndZoom(point, this.zoom);
+ map.enableScrollWheelZoom();
+ this.map = map;
+ this.$emit('ready', map);
+ this.$emit('getMapStatus', 'success')
+ this.getUserPosition()
+ },
+ async getUserPosition() {
+ const geolocation = new BMapGL.Geolocation();
+ let that = this
+ geolocation.getCurrentPosition(function(r){
+ if(this.getStatus() == BMAP_STATUS_SUCCESS){
+ // 瀹氫綅鎴愬姛锛宺.point 鍗充负鑾峰彇鍒扮殑鐧惧害鍧愭爣锛圔D09ll锛�
+ let pt = r.point;
+ that.userPosition = {
+ lng: pt.lng,
+ lat: pt.lat
+ }
+ that.$emit('getUserPositionStatus', 'success')
+ that.diffDistance()
+ } else {
+ that.$emit('getUserPositionStatus', 'fail')
+ }
+ });
+ },
+ diffDistance() { //娴嬭窛
+ if (!this.map || !this.userPosition) return
+ const userPoint = new BMapGL.Point(this.userPosition.lng, this.userPosition.lat); // 鐐笰鍧愭爣
+ const centerPoint = new BMapGL.Point(this.center.lng, this.center.lat); // 鐐笲鍧愭爣
+ const distance = this.map.getDistance(userPoint,centerPoint)
+ this.$emit('getDistance', Math.floor(distance))
+ }
+ }
+};
+</script>
+
+<style scoped>
+.map-wrapper {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+.map-container {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0