angular2-baidu-map网站中使用百度地图

效果图

1、安装

npm install anglar2-baidu-map --save

2、在主模块中注册 app.module.ts

import {BaiduMap} from "angular2-baidu-map";

组件中导入
declarations: [
    BaiduMap
]

3、创建组件使用地图 baidu.component.ts

import {Component,OnInit} from '@angular/core';
import {OfflineOptions,ControlAnchor,NavigationControlType} from 'angular2-baidu-map';

@Component({
  selector: 'map-presentation',templateUrl: "../templates/baidu.component.html",styles: [`
        baidu-map{
            width: 100%;
            height: 500px;
            display: block;
        }
    `]
})
export class BaiduComponent implements OnInit {

  opts:any;
  offlineOpts:OfflineOptions;

  ngOnInit() {
    // 配置地图,参考百度地图api
    this.opts = {
      // 地图中心坐标
      center: {
        longitude: 116.4177150000,latitude: 40.0612540000
      },zoom: 17,// 地图上的坐标
      markers: [{
        longitude: 116.4177150000,latitude: 40.0612540000,title: '华泰汽车集团',content: '朝阳区立水桥',autoDisplayInfoWindow: true
      }],geolocationCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT
      },scaleCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
      },overviewCtrl: {
        isOpen: true
      },navCtrl: {
        type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
      }
    };

    this.offlineOpts = {
      retryInterval: 5000,txt: '没有网络'
    };
  }

  // 刚加载加载地图信息
  loadMap(e:any) {
    console.log(e);
  }

  // 单机地图坐标,打印信息
  clickMarker(marker:any) {
    console.log(marker);
  }

}

4、模板文件，注意，这里需要在百度地图api注册key

<baidu-map
  ak="8azVgQbZR9irKHBOsqMzi8CAT7l1gtjt"
  [options]="opts"
  [offline]="offlineOpts"
  (onMapLoaded)="loadMap($event)"
  (onMarkerClicked)="clickMarker($event)"
></baidu-map>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!