一、引言
之前在Angular4使用过百度地图，记录一下踩过的坑
二、实现
1.安装
npm install angular2-baidu-map
2.在app.module.ts配置
ak key在http://lbsyun.baidu.com/apiconsole/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 没有属性
}
}效果预览
总结
以上所述是小编给大家介绍的详解在Angular4中使用ng2-baidu-map的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！