AVM 组件引用高德地图问题

BIP289437

编写了打开地图代码，移动端页面出现下面的报错，但是控制台都没有报错，而且为什么一点击WIFI真机实时预览 移动端的WIFI调试就断开了，地图插件什么的都有添加

1. <template>
   
2. <safe-area class="page">
   
3.     <view id="mapContainer" style="width: 100%; height: 100%;" @touchstart="stopPropagation"></view>
   
4. </safe-area>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.     name: 'map1',
   
10.     data() {
    
11.         return {
    
12.             map: null // 用于存储地图实例
    
13.         };
    
14.     },
    
15.     mounted() {
    
16.         this.initMap();
    
17.     },
    
18.     methods: {
    
19.         stopPropagation(event) {
    
20.             // 防止事件传递到父组件
    
21.             event.stopPropagation();
    
22.         },
    
23.         initMap() {
    
24.             var aMap = api.require('aMap');
    
25.             
    
26.             // 调用隐私协议
    
27.             aMap.updateMapViewPrivacy({
    
28.                 privacyAgree: 'didAgree',
    
29.                 privacyShow: 'didShow',
    
30.                 containStatus: 'didContain'
    
31.             });
    
32.             aMap.updateSearchPrivacy({
    
33.                 privacyAgree: 'didAgree',
    
34.                 privacyShow: 'didShow',
    
35.                 containStatus: 'didContain'
    
36.             });
    
37. 
    
38.             // 确保地图容器的宽高设置正确
    
39.             var mapContainer = document.getElementById('mapContainer');
    
40.             mapContainer.style.width = '100%';
    
41.             mapContainer.style.height = '100%';
    
42. 
    
43.             // 通过 open 方法打开地图
    
44.             this.map = aMap.open({
    
45.                 rect: {
    
46.                     x: 0,
    
47.                     y: 0,
    
48.                     w: '100%',
    
49.                     h: '100%'
    
50.                 },
    
51.                 showUserLocation: true,
    
52.                 zoomLevel: 10,
    
53.                 center: {
    
54.                     lon: 116.40,
    
55.                     lat: 39.90
    
56.                 },
    
57.                 fixedOn: 'mapContainer'
    
58.             }, (ret, err) => {
    
59.                 if (ret && ret.status) {
    
60.                     console.log('地图加载成功');
    
61.                 } else {
    
62.                     console.error('地图加载失败', err);
    
63.                 }
    
64.             });
    
65.         }
    
66.     }
    
67. }
    
68. </script>
    
69. 
    
70. <style>
    
71.     .page {
    
72.         height: 100%;
    
73.         background: #fff;
    
74.     }
    
75.    
    
76.     #mapContainer {
    
77.         width: 100%;
    
78.         height: 100%;
    
79.     }
    
80. </style>

复制代码

勇可可【1161277121】

aMap.createMap是哪里的代码

BIP289437

勇可可【1161277121】 · 2024-5-19 01:04aMap.createMap是哪里的代码

1. <template>
   
2. <safe-area class="page">
   
3.       <view id="mapContainer" style="width: 100%; height: 100%;"></view>
   
4. </safe-area>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.     name: 'map1',
   
10.     data() {
    
11.         return {
    
12.             map: null // 用于存储地图实例
    
13.         };
    
14.     },
    
15.     mounted() {
    
16.         this.initMap();
    
17.     },
    
18.     methods: {
    
19.         initMap() {
    
20.             var aMap = api.require('aMap');
    
21.             
    
22.             // 调用隐私协议
    
23.             aMap.updateMapViewPrivacy({
    
24.                 privacyAgree: 'didAgree',
    
25.                 privacyShow: 'didShow',
    
26.                 containStatus: 'didContain'
    
27.             });
    
28.             aMap.updateSearchPrivacy({
    
29.                 privacyAgree: 'didAgree',
    
30.                 privacyShow: 'didShow',
    
31.                 containStatus: 'didContain'
    
32.             });
    
33. 
    
34.             // 确保地图容器的宽高设置正确
    
35.             var mapContainer = document.getElementById('mapContainer');
    
36.             mapContainer.style.width = '100%';
    
37.             mapContainer.style.height = '100%';
    
38. 
    
39.             // 通过 open 方法打开地图
    
40.             this.map = aMap.open({
    
41.                 rect: {
    
42.                     x: 0,
    
43.                     y: 0,
    
44.                     w: '100%',
    
45.                     h: '100%'
    
46.                 },
    
47.                 showUserLocation: true,
    
48.                 zoomLevel: 10,
    
49.                 center: {
    
50.                     lon: 116.40,
    
51.                     lat: 39.90
    
52.                 },
    
53.                 fixedOn: 'mapContainer'
    
54.             }, (ret, err) => {
    
55.                 if (ret && ret.status) {
    
56.                     console.log('地图加载成功');
    
57.                 } else {
    
58.                     console.error('地图加载失败', err);
    
59.                 }
    
60.             });
    
61.         }
    
62.     }
    
63. }
    
64. </script>
    
65. 
    
66. <style>
    
67.     .page {
    
68.         height: 100%;
    
69.         background: #fff;
    
70.     }
    
71.    
    
72.     #mapContainer {
    
73.         width: 100%;
    
74.         height: 100%;
    
75.     }
    
76. </style>

复制代码

修改了一下代码，不报错，但是移动端上没有显示出地图

BIP289437

为什么显示地图加载成功，但是移动端上什么都不显示

至高吾·尚

参数rect中的w和h不要使用100%， 可以改成'auto' 或者 具体的窗口高度（例如 api.winWidth、api.winHeight、api.frameWidth、api.frameHeight)

BIP289437

至高吾·尚 · 2024-5-20 08:45参数rect中的w和h不要使用100%， 可以改成'auto' 或者 具体的窗口高度（例如 api.winWidth、api.winHeight、api.frameWidth、api.frameHeight)

好的谢谢

勇可可【1161277121】

BIP289437 · 2024-5-20 09:01好的谢谢

解决了就行