Angular 4谷歌地图完全控制和缩放控制位置和样式

时间:2017-10-22 11:15:28

标签: angular google-maps angular-google-maps

我正在使用AGM - Angular Google Maps进行角度4应用。我已将控制选项设置为文档。但他们没有工作。我的代码如下。 HTML

[latitude]="lat" 
[longitude]="lng" 
[zoom]="zoom" 
[styles] = "styles"
[disableDefaultUI]="true"
[zoomControl]="true"
[scaleControl]="true"
[scaleControlOptions]="scaleControlOptions"
[zoomControlOptions]="zoomControlOptions"
[fullscreenControl]="true"
[fullscreenControlOptions]="fullscreenControlOptions"
[streetViewControl]="'false'"
[mapTypeControl]="'true'"
[mapTypeControlOptions]="mapTypeControlOptions"

Ts上的属性

lat = 40;
lng = 40;
zoom = 2;

zoomControlOptions: ZoomControlOptions = {
    position: ControlPosition.LEFT_BOTTOM,
    style: ZoomControlStyle.LARGE
  };

 fullscreenControlOptions: FullscreenControlOptions = {
    position : ControlPosition.LEFT_BOTTOM
  };

  mapTypeControlOptions: MapTypeControlOptions = {
    mapTypeIds: [ MapTypeId.ROADMAP],
    position: ControlPosition.BOTTOM_LEFT,
  };

样式json从https://mapstyle.withgoogle.com/复制。 我需要使用自定义样式在左下角进行完全控制和缩放控制。

enter image description here

1 个答案:

答案 0 :(得分:2)

您应该使用mapReady事件和SetOptions方法。

    @State private var fav = [Favourite]()
    @State var liked = false
    VStack{
       // Heading
       HStack(alignment: .top){
          VStack{
            self.liked ? Heart(image:"suit.heart.fill").foregroundColor(Color.red) : Heart(image: "suit.heart").foregroundColor(Color("Gray"))
                        }
                        .onTapGesture {
               if self.liked {
               self.removeFav(self.singleFav!)
            } else {
                   let faveID = self.myViewModel.myModel.id
                   let myFav = Favourite(id:faveID)
                   self.fav.append(myFav)
                   self.saveFave()
           }
        }
   }
@State var liked

这是解决方案: https://github.com/SebastianM/angular-google-maps/issues/1308