angular - การเพิ่มสไตล์ให้กับ Angular2 Google Maps
สวัสดี ฉันเป็นมือใหม่ใน Angular2/Typescript และฉันกำลังพยายามจัดสไตล์ให้กับแผนที่ที่ฉันเพิ่มในโปรเจกต์ Angular2 ของฉันโดยใช้คอมโพเนนต์ Angular2 Google Maps แต่ฉันไม่สามารถเข้าใจวิธีการใช้ MapTypeStyle Interface ที่ยังไม่ได้มีเอกสารอธิบายไว้ได้ ฉันควรใช้มันในโมดูลและใน HTML ของฉันอย่างไร โมดูลแผนที่ทำงานได้ แต่สไตล์ยังไม่ถูกปรับใช้ ช่วยแนะนำด้วยจะขอบคุณมาก
เอกสารอ้างอิงประเภทสไตล์ของ Google Maps ตามลำดับ
html :
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>
โมดูล (ฉบับย่อ)
export class GmapComponent implements OnInit {
title: string = 'Current Location';
lat: number = 50.937531;
lng: number = 6.960278600000038;
constructor() { }
ngOnInit() {
}
}
คำตอบ #1
เอกสารไม่ค่อยมีประโยชน์เท่าไหร่ ดังนั้นฉันจึงต้องไปค้นโค้ดของคอมโพเนนต์เอง
<sebm-google-map [latitude]="lat" [longitude]="lng" [styles]="styles">
<sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>
เพียงแค่เพิ่ม styles ก็น่าจะใช้งานได้ โดยที่ styles เป็นประเภท MapTypeStyle[] ซึ่งถูกประกาศไว้ที่นี่
ลองกำหนด styles เป็นบางอย่างเช่น:
let styles = [{
"featureType": "water",
"stylers": [{
"color": "#ff0000"
}]
}];
นั่น ควรจะ ทำให้น้ำของคุณกลายเป็นสีแดง แต่ฉันยังไม่ได้ทดลองด้วยตัวเองเลย ฉันแค่เอาอ้างอิงจากโค้ด
คำตอบ #2
นี่ใช้ได้ผลสำหรับฉัน ☺ :-p
<sebm-google-map *ngIf="map" [latitude]="placeLat" [longitude]="placeLng" [scrollwheel]="false" [zoom]="zoom" [disableDefaultUI]="true" [styles]='[
{
elementType : "labels.icon",
stylers : [{
visibility : "off"
}]
}]'>
