地图组件

地图组件是 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 属性说明 ​

事件说明 ​

示例代码 ​

注意事项 ​