在angular4中使用ng2-baidu-map详解

先贴上我的参考网址:https://leftstick.github.io/angular2-baidu-map/#/home  

1. 我看到在module中有两种写法:

第一种写法:

imports:[
  
BrowserModule,
  BaiduMapModule.forRoot({ak:'your key'})
]
,

第二种写法

@NgModule({
  imports:[
    
FormsModule,
    CommonModule,
    BaiduMapModule,
    NgbModule.forRoot(),
    RouterModule.forChild(routes)
  ]
,

your key>

经过实践发现我只能用第一种写法

2. 在写的时候发现没报错,也没显示地图,后来想到我以前搞echarts时,记得要给个地方让他显示,于是我

<baidu-map[options]="opts"style="height:500px;width:900px;">baidu-map>

有个蛋用,就是不显示。。。那我又试了

<divstyle="height:500px;width:900px;">
  <baidu-map[options]="opts">baidu-map>
div>

成功了。。。Amazing。。。。。

3. 是时候总结一波了

 有三个Components,分别是baidu-map、marker、control

(1)在baidu-map中只能有option、loaded、clicked这三个存在,其中options必须要有,例如

<baidu-map[options]="opts"(loaded)=""(clicked)="">baidu-map>

(2)Marker是地图上的标记,并且必须是数组,在baidu-map之间,

 

(3)Control是地图的控件,其中type有

Navigation:导航

Overviewmap:地图全景

Scale:比例尺

Maptype:地图类型

Geolocation:地理位置

Panorama:全景

。。。。。。上代码。。。。

 

。。。。。。。。。。。。。。。。。。。。。components

 

 

import {Component, OnInit} from '@angular/core';

import {
  MapOptions, Point, MarkerOptions, NavigationControlOptions, ControlAnchor,
  NavigationControlType, OverviewMapControlOptions, ScaleControlOptions, MapTypeControlOptions, MapTypeControlType,
  GeolocationControlOptions
} from 'angular2-baidu-map';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {

  public opts: MapOptions;
  public markers: Array<{ point: Point; options?: MarkerOptions }>;
  public controlOpts: NavigationControlOptions;
  public overviewmapOpts: OverviewMapControlOptions;
  public scaleOpts: ScaleControlOptions;
  public mapTypeOpts: MapTypeControlOptions;
  public geolocationOpts: GeolocationControlOptions;
  // public markers: Array<{ point: Point }>;
  constructor() {
    this.opts = {
      centerAndZoom: {     // 设置中心点和缩放级别
        lng: 120.62,   // 经度
        lat: 31.32,    // 纬度
        zoom: 15           // 缩放级别
      },
      minZoom: 3,  // 最小缩放级别的地图
      maxZoom: 19, // 最大缩放级别的地图
      enableHighResolution: true,  // 是否用高分辨率的地图,default:true
      enableAutoResize: true,  // 是否可以自动调整大小,default:true
      enableMapClick: true,  // 地图是否可以点击,default:true
      disableDragging: false, // 是否禁用地图拖动功能
      enableScrollWheelZoom: true, // 是否启用滚轮进行缩放功能
      disableDoubleClickZoom: false, // 是否禁用双击缩放功能
      enableKeyboard: true,  // 是否启用键盘移动地图功能
      enableInertialDragging: false,     // 是否启用惯性阻力函数
      enableContinuousZoom: true,  // 是否启用连续缩放功能
      disablePinchToZoom: false,   // 是否禁用缩放功能的缩放
      cursor: '',         // 设置默认的光标样式,应该遵循CSS规范
      draggingCursor: '', // 设置默认的拖动光标样式,应该遵循CSS规范
      currentCity: '苏州市',   // 设置当前的城市
    };

    // 这是地图标记marker
    this.markers = [
      {
        options: {
          icon: {
            imageUrl: '/assets/1.jpg',
            size: {
              height: 60,
              width: 50
            }
          },
          title: 'asdkjgaslfkjasd'
        },
        point: {
          lng: 120.62,   // 经度
          lat: 31.32,    // 纬度
        }
      },
      {
        point: {
          lng: 120.63,   // 经度
          lat: 31.32,    // 纬度
        }
      },
      {
        point: {
          lng: 120.63,   // 经度
          lat: 31.31,    // 纬度
        }
      }
    ];
    // 这是控件control
    this.controlOpts = {         // 导航控件
      anchor: ControlAnchor.BMAP_ANCHOR_TOP_LEFT,      // 显示的控件的位置
      type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE,   // 用来描述它是什么样的导航
      offset: {                                        // 控件的大小
        width: 30,
        height: 30
      },
      showZoomInfo: true,                             // 是否展示当前的信息
      enableGeolocation: true                         // 是否启用地理定位功能
    };
    this.overviewmapOpts = {    // 地图全景控件
      anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,  // 显示的控件的位置
      isOpen: true                                    // whf 。。官网里没有说明??
    };
    this.scaleOpts = {          // 比例尺控件
      anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
    };
    this.mapTypeOpts = {        // 地图类型
      type: MapTypeControlType.BMAP_MAPTYPE_CONTROL_HORIZONTAL
    };
    // Geolocation 和Panorama 没有属性
  }
}

。。。。。结果。。。

 

 

在angular4中使用ng2-baidu-map详解_第1张图片2018.9.18更新---------------------------------------------------------------------------------------

最近正好要用到百度地图,但是界面的主题是暗色的,而ng2-baidu-map没有提供修改主题,查了百度地图,发现还是可以修改主题的

html中加了(loaded)="mapLoaded($event)"这个方法---

ts中的方法------------

public mapLoaded(map: any): void {
  map.setMapStyle({                // 可以设置三种字段:元素、属性、样式
    styleJson: [{
      "featureType": "all",        // 这是元素
      "elementType": "geometry",   // 这是属性
      "stylers": {                 // 这是样式
        "hue": "#007fff",
        "saturation": 89
      }
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": {
        "color": "#ffffff"
      }
    }]
  });
}

关于styleJson怎么生成的,具体什么意思可以查看一下两个网站

http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom

http://lbsyun.baidu.com/custom/

 

你可能感兴趣的:(在angular4中使用ng2-baidu-map详解)