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

一、引言

之前在angular4使用过百度地图，记录一下踩过的坑

二、实现

1.安装

npm install angular2-baidu-map

2.在app.module.ts配置

ak key在中创建

import { browsermodule } from '@angular/platform-browser'
import { ngmodule } from '@angular/core'

import { appcomponent } from './app.component'

import { baidumapmodule } from 'angular2-baidu-map'

@ngmodule({
  declarations: [appcomponent],
  imports: [browsermodule, baidumapmodule.forroot({ ak: 'your ak' })],
  providers: [],
  bootstrap: [appcomponent]
})
export class appmodule {}

3.在app.component.html使用

<div style="height: 500px;width: 900px;" >
  <baidu-map [options]="opts" >
    <!--<marker [point]="point" [options]="markopts" (loaded)="" (clicked)=""></marker>-->
    <marker *ngfor="let marker of markers" [point]="marker.point" [options]="marker.options"></marker>
    <!--导航控件-->
    <control type="navigation" [options]="controlopts"></control>
    <!--地图全景控件-->
    <control type="overviewmap" [options]="overviewmapopts"></control>
    <!--比例尺-->
    <control type="scale" [options]="scaleopts"></control>
    <!--地图类型-->
    <control type="maptype" [options]="maptypeopts"></control>
 
    <control type="geolocation" [options]="geolocationopts"></control>
  </baidu-map>
</div>

4.在app.component.ts

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 text: string;
  public onmarkerload(marker: any) {
    const label = new window.bmap.label(’文字标注‘, {
      offset: new window.bmap.size(20, -12)
    });
    label.setstyle({
      border: '1px solid #d81e06',
      color: '#d81e06',
      fontsize: '10px',
      padding: '1px'
    });
    marker.setlabel(label);
  }
  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                                    
    };
    this.scaleopts = {          // 比例尺控件
      anchor: controlanchor.bmap_anchor_bottom_left
    };
    this.maptypeopts = {        // 地图类型
      type: maptypecontroltype.bmap_maptype_control_horizontal
    };
    // geolocation 和panorama 没有属性
  }
}

效果预览