map()
版本要求:
基础库≥2.10.0
描述
地图组件。
参数
无
返回值
无
示例代码
标记点与气泡
<map
longitude="{{lng}}"
latitude="{{lat}}"
scale="{{14}}"
markers="{{markers}}"
class="map"
bind:markertap="onMarkerTap"
bind:callouttap="onCalloutTap"
/>.map {
width: 100%;
height: 500rpx;
}Page({
data: {
lng: 116.397428,
lat: 39.90923,
markers: [
{
id: 1,
longitude: 116.397428,
latitude: 39.90923,
title: '天安门',
iconPath: '/images/marker.png',
width: 30,
height: 30,
callout: {
content: '天安门广场',
color: '#333',
fontSize: 14,
bgColor: '#fff',
borderRadius: 4,
padding: 8,
textAlign: 'center',
},
},
{
id: 2,
longitude: 116.407428,
latitude: 39.91523,
title: '故宫',
iconPath: '/images/marker.png',
width: 30,
height: 30,
},
],
},
onMarkerTap(e) {
console.log('点击标记点:', e.detail.markerId);
},
onCalloutTap(e) {
console.log('点击气泡:', e.detail.markerId);
},
});路线与覆盖层
<map
longitude="{{lng}}"
latitude="{{lat}}"
scale="{{13}}"
polyline="{{polyline}}"
circles="{{circles}}"
polygons="{{polygons}}"
class="map"
bind:regionchange="onRegionChange"
/>.map {
width: 100%;
height: 500rpx;
border-radius: 12px;
}Page({
data: {
lng: 116.407428,
lat: 39.91523,
polyline: [
{
points: [
{ latitude: 39.90923, longitude: 116.397428 },
{ latitude: 39.91523, longitude: 116.407428 },
{ latitude: 39.92023, longitude: 116.417428 },
],
color: '#1890ff',
width: 4,
dottedLine: false,
},
],
circles: [
{
latitude: 39.90923,
longitude: 116.397428,
radius: 500,
color: '#1890ff80',
fillColor: '#1890ff20',
strokeWidth: 2,
},
],
polygons: [
{
points: [
{ latitude: 39.91, longitude: 116.4 },
{ latitude: 39.92, longitude: 116.41 },
{ latitude: 39.91, longitude: 116.42 },
],
strokeColor: '#ff4d4f',
fillColor: '#ff4d4f20',
strokeWidth: 2,
},
],
},
onRegionChange(e) {
console.log('视野变化:', e.detail.type);
},
});