地圖組件

地圖組件是 uni-app 提供的用於展示地圖的組件，支援各種地圖操作和自訂功能。

map 地圖

map 組件用於展示地圖，支援標記點、標記線、覆蓋物等。

屬性說明

屬性名	類型	預設值	說明
longitude	Number		中心經度，必填
latitude	Number		中心緯度，必填
scale	Number	16	縮放級別，取值範圍為 5-18
markers	Array		標記點
polyline	Array		路線
circles	Array		圓
polygons	Array		多邊形
include-points	Array		縮放視野以包含所有給定的座標點
show-location	Boolean	false	顯示帶有方向的當前定位點
enable-3D	Boolean	false	展示3D樓塊
show-compass	Boolean	false	顯示指南針
enable-overlooking	Boolean	false	開啟俯視
enable-zoom	Boolean	true	是否支援縮放
enable-scroll	Boolean	true	是否支援拖動
enable-rotate	Boolean	false	是否支援旋轉
enable-satellite	Boolean	false	是否開啟衛星圖
enable-traffic	Boolean	false	是否開啟即時路況
enable-poi	Boolean	true	是否展示 POI 點
enable-building	Boolean	true	是否展示建築物

markers 屬性說明

屬性	說明	類型	必填	預設值
id	標記點id	Number	是
latitude	緯度	Number	是
longitude	經度	Number	是
title	標註點名	String	否
iconPath	顯示的圖示	String	是
rotate	旋轉角度	Number	否	0
alpha	標註的透明度	Number	否	1
width	標註圖示寬度	Number	否	圖片實際寬度
height	標註圖示高度	Number	否	圖片實際高度
callout	自訂標記點上方的氣泡視窗	Object	否
label	為標記點旁邊增加標籤	Object	否
anchor	經緯度在標註圖示的錨點，預設底邊中點	Object	否

事件說明

事件名	說明	回傳值
@markertap	點擊標記點時觸發	event.detail =
@callouttap	點擊標記點對應的氣泡時觸發	event.detail =
@controltap	點擊控制項時觸發	event.detail =
@regionchange	視野發生變化時觸發	event.type = begin/end, event.detail =
@tap	點擊地圖時觸發	event.detail =
@updated	地圖渲染更新完成時觸發

範例程式碼

vue

<template>
  <view class="container">
    <map
      id="myMap"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :markers="markers"
      :polyline="polyline"
      :circles="circles"
      :polygons="polygons"
      :include-points="includePoints"
      :show-location="true"
      :enable-3D="false"
      :show-compass="true"
      :enable-zoom="true"
      :enable-scroll="true"
      @markertap="onMarkerTap"
      @callouttap="onCalloutTap"
      @regionchange="onRegionChange"
      @tap="onMapTap"
      style="width: 100%; height: 300px;"
    ></map>
    
    <view class="map-controls">
      <button type="primary" @click="moveToLocation">移動到當前位置</button>
      <button type="primary" @click="addMarker">新增標記點</button>
      <button type="primary" @click="drawRoute">繪製路線</button>
      <button type="primary" @click="includeAllPoints">顯示所有點</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 地圖中心點
      longitude: 116.397390,
      latitude: 39.908860,
      scale: 14,
      
      // 標記點
      markers: [{
        id: 1,
        latitude: 39.908860,
        longitude: 116.397390,
        title: '天安門',
        iconPath: '/static/images/marker.png',
        width: 30,
        height: 30,
        callout: {
          content: '天安門廣場',
          color: '#000000',
          fontSize: 14,
          borderRadius: 4,
          borderWidth: 1,
          borderColor: '#cccccc',
          bgColor: '#ffffff',
          padding: 5,
          display: 'BYCLICK',
          textAlign: 'center'
        },
        label: {
          content: '天安門',
          color: '#000000',
          fontSize: 12,
          anchorX: 0,
          anchorY: -60,
          borderWidth: 1,
          borderColor: '#ffffff',
          borderRadius: 4,
          bgColor: '#ffffff',
          padding: 2,
          textAlign: 'center'
        }
      }],
      
      // 路線
      polyline: [],
      
      // 圓形
      circles: [{
        latitude: 39.908860,
        longitude: 116.397390,
        color: '#FF0000AA',
        fillColor: '#7cb5ec88',
        radius: 500,
        strokeWidth: 2
      }],
      
      // 多邊形
      polygons: [{
        points: [
          {
            latitude: 39.913860,
            longitude: 116.407390
          },
          {
            latitude: 39.913860,
            longitude: 116.387390
          },
          {
            latitude: 39.903860,
            longitude: 116.387390
          },
          {
            latitude: 39.903860,
            longitude: 116.407390
          }
        ],
        strokeWidth: 2,
        strokeColor: '#FF0000AA',
        fillColor: '#7cb5ec88'
      }],
      
      // 包含所有點
      includePoints: [{
        latitude: 39.908860,
        longitude: 116.397390
      }, {
        latitude: 39.913860,
        longitude: 116.407390
      }],
      
      // 地圖上下文
      mapContext: null
    }
  },
  onReady() {
    // 取得地圖上下文
    this.mapContext = uni.createMapContext('myMap', this);
  },
  methods: {
    // 標記點點擊事件
    onMarkerTap(e) {
      console.log('點擊了標記點：', e.detail.markerId);
      uni.showToast({
        title: `點擊了標記點 ${e.detail.markerId}`,
        icon: 'none'
      });
    },
    
    // 氣泡點擊事件
    onCalloutTap(e) {
      console.log('點擊了氣泡：', e.detail.markerId);
      uni.showToast({
        title: `點擊了氣泡 ${e.detail.markerId}`,
        icon: 'none'
      });
    },
    
    // 地圖區域變化事件
    onRegionChange(e) {
      if (e.type === 'end') {
        console.log('地圖區域變化：', e.detail);
      }
    },
    
    // 地圖點擊事件
    onMapTap(e) {
      console.log('點擊了地圖：', e.detail);
    },
    
    // 移動到當前位置
    moveToLocation() {
      this.mapContext.moveToLocation();
      uni.showToast({
        title: '已移動到當前位置',
        icon: 'none'
      });
    },
    
    // 新增標記點
    addMarker() {
      const newMarker = {
        id: this.markers.length + 1,
        latitude: this.latitude + (Math.random() * 0.01 - 0.005),
        longitude: this.longitude + (Math.random() * 0.01 - 0.005),
        title: `標記點 ${this.markers.length + 1}`,
        iconPath: '/static/images/marker.png',
        width: 30,
        height: 30
      };
      
      this.markers.push(newMarker);
      
      uni.showToast({
        title: `已新增標記點 ${newMarker.id}`,
        icon: 'none'
      });
    },
    
    // 繪製路線
    drawRoute() {
      // 模擬路線點
      const points = [];
      for (let i = 0; i < 5; i++) {
        points.push({
          latitude: this.latitude + (Math.random() * 0.01 - 0.005),
          longitude: this.longitude + (Math.random() * 0.01 - 0.005)
        });
      }
      
      this.polyline = [{
        points: points,
        color: '#5470c6',
        width: 4,
        dottedLine: false,
        arrowLine: true,
        arrowIconPath: '/static/images/arrow.png'
      }];
      
      uni.showToast({
        title: '已繪製路線',
        icon: 'none'
      });
    },
    
    // 顯示所有點
    includeAllPoints() {
      const points = [];
      
      // 新增所有標記點
      this.markers.forEach(marker => {
        points.push({
          latitude: marker.latitude,
          longitude: marker.longitude
        });
      });
      
      // 新增當前位置
      points.push({
        latitude: this.latitude,
        longitude: this.longitude
      });
      
      this.includePoints = points;
      
      // 使用地圖上下文調整視野
      this.mapContext.includePoints({
        points: points,
        padding: [50, 50, 50, 50]
      });
      
      uni.showToast({
        title: '已顯示所有點',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 15px;
}
.map-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 15px;
}
.map-controls button {
  margin-bottom: 10px;
  width: 48%;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269

注意事項

在使用地圖組件時，需要注意各平台的差異性，某些功能可能在特定平台上不可用。
使用地圖組件需要申請對應平台的地圖服務金鑰，並進行相應的設定：
- 微信小程式：需要在微信公眾平台設定地圖服務 API
- App：需要在 manifest.json 中設定高德地圖或百度地圖的 AppKey
- H5：需要在 manifest.json 中設定騰訊地圖的 Key
地圖組件的效能消耗較大，建議合理使用，避免在一個頁面中同時顯示多個地圖組件。
在進行地圖相關操作時，建議使用 mapContext 上下文物件，它提供了更多的控制方法。
地圖標記點的圖示路徑支援本地路徑和網路路徑，但建議使用本地路徑以提高載入速度。

地圖組件 ​

map 地圖 ​

屬性說明 ​

markers 屬性說明 ​

事件說明 ​

範例程式碼 ​

注意事項 ​