[英]How to affect a custom google map style in Ionic v6 capacitor?
I can't find the solution for apply a custom style on my google map app build with ionic !我找不到在使用 ionic 构建的谷歌地图应用程序上应用自定义样式的解决方案!
I generate a Id map and i create a custom map in Google Cloud Platform.我生成了一个 Id 地图,并在 Google Cloud Platform 中创建了一个自定义地图。
But how i can use it ?但我怎么能使用它?
I use Ionic 6.19.1 and Angular.我使用 Ionic 6.19.1 和 Angular。
Html: html:
<capacitor-google-maps #map></capacitor-google-maps>
Angular:角度:
this.Map = await GoogleMap.create({
id: 'Map',
element: this.mapRef.nativeElement,
apiKey: environment.apiKey,
config: {
center: {
lat: 40,
lng: 5,
},
zoom: 10,
},
});
i follow this official tutorial: https://capacitorjs.com/docs/apis/google-maps#usage我遵循这个官方教程: https ://capacitorjs.com/docs/apis/google-maps#usage
Thank in advance预先感谢
On you capacitor map config object You could add styles property:在您的电容器映射配置对象上您可以添加样式属性:
styles = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#523735"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c9b2a6"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#dcd2be"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ae9e90"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#93817c"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a5b076"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#447530"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#fdfcf8"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#f8c967"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#e9bc62"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#e98d58"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#db8555"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#806b63"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8f7d77"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#b9d3c2"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#92998d"
}
]
}
];
async createMap() {
this.newMap = await GoogleMap.create({
id: 'my-cool-map',
element: this.mapRef.nativeElement,
apiKey: environment.apiKey,
config: {
styles : this.styles,
center: {
lat: 33.6,
lng: -117.9,
},
zoom: 8,
},
});
}
You could generate custom styles from google dashboard: https://mapstyle.withgoogle.com/ Or You could get different styles templates from this website: https://snazzymaps.com/ just expand code then save its value on styles array.您可以从谷歌仪表板生成自定义样式: https ://mapstyle.withgoogle.com/ 或者您可以从该网站获取不同的样式模板: https ://snazzymaps.com/ 只需扩展代码然后将其值保存在样式数组中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.