ค้นหาเว็บไซต์

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"
                }]
            }]'>

บทความที่เกี่ยวข้อง