map()
Requires:
Base Library≥2.10.0
Description
Map component.
Parameters
None
Return Value
None
Examples
Markers and callouts
<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: 'Tiananmen',
iconPath: '/images/marker.png',
width: 30,
height: 30,
callout: {
content: 'Tiananmen Square',
color: '#333',
fontSize: 14,
bgColor: '#fff',
borderRadius: 4,
padding: 8,
textAlign: 'center',
},
},
{
id: 2,
longitude: 116.407428,
latitude: 39.91523,
title: 'Forbidden City',
iconPath: '/images/marker.png',
width: 30,
height: 30,
},
],
},
onMarkerTap(e) {
console.log('Marker tapped:', e.detail.markerId);
},
onCalloutTap(e) {
console.log('Callout tapped:', e.detail.markerId);
},
});Routes and overlays
<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.40 },
{ latitude: 39.92, longitude: 116.41 },
{ latitude: 39.91, longitude: 116.42 },
],
strokeColor: '#ff4d4f',
fillColor: '#ff4d4f20',
strokeWidth: 2,
},
],
},
onRegionChange(e) {
console.log('Region change:', e.detail.type);
},
});