一、引言

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

二、实现

1.安装

新公共管理安装角度2-百度-地图

2.在app.module.ts配置

美国阿拉斯加邮递区号键在http://lbsyun.baidu.com/apiconsole/key中创建

从" @angular/platform-browser "导入{浏览器模块}从“@棱角分明/核心”导入{ AppComponent } ./app.component从“angular 2-Baidu-map”@ ng模块({ declarations :[AppComponent]，imports: [BrowserModule，Baidu mapmodule。forroot({ AK : ' your AK ' })]，providers: []，bootstrap: [AppComponent])导入{ 3 }导出类AppModule .在app.component.html使用

div style=' height: 500px宽度： 900像素百度地图[选项]='opts '！-标记[点]='点'[选项]='标记'(已加载)=' '(已单击)='/marker-marker * ngFor='让标记的标记[point]='标记。点“[选项]=”标记。选项'/标记！-导航控件-控件类型='导航'[选项]='控件选项'/控件！-地图全景控件-控件类型='概览图'[选项]='概述mapopts '/控件！-比例尺-control type=' scale '[options]=' scale opts '/control！-地图类型-控件类型=' map type '[选项]=' maptype opts '/控件控件类型='地理定位'[选项]='地理定位选项'/控件/百度地图/div4 .在app.component.ts

从“@棱角分明/核心”导入{组件，在初始化时}；从angular 2-百度地图'导入{地图选项，点，标记选项，导航控制选项，控制锚，导航控制类型，概述地图控制选项，缩放控制选项，地图类型控制选项，地图类型控制类型，地理位置控制选项}；@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.sass']})导出类AppComponent { public opts 3360 MapOptions；公共标记：数组{点数：点选项？ marke props }；公共控制选项3360导航控制选项；公共概述mapopts 3360概述mapcontroloptions公共scale opts 3360比例控制选项；public maptype opts 3360 maptype controloptions；公共地理位置选项3360地理位置控制选项；//文字标注公共文本：字符串；public OnMarkerLoad(标记： any){ const label=new window .标签('文字标注，{ offset:新窗口. BMap。大小(20，-12)})；标签。setstyle({ border : ' 1px实线#d81e06 '、color: '#d81e06 '、fontSize: '10px '、padd : ' 1px ' })；marker.setLabel(标签);} constructor(){ this。opts={ centandzoom : }//设置中心点和缩放级别lng: 120.62，//经度lat: 31.32，//纬度动物园： 15 /缩放级别}，minZoom: 3，//最小缩放级别的地图maxZoom: 19，//最大缩放级别的地图启用高分辨率： true，//是否用高分辨率的地图，默认值：true enableAutoResize: true，//是否可以自动调整大小，默认值：true enableMapClick: true，//地图是否可以点击，默认值：true disableDragging: false，//是否禁用地图拖动功能enableScrollWheelZoom: true，//是否启用滚轮进行缩放功能disabledoublelickzoom : false，//是否禁用双击缩放功能enableKeyboard: true，//是否启用键盘移动地图功能enableInitialialdragging : false，//是否启用惯性阻力函数enableContinuousZoom: true，//是否启用连续缩放功能disablePinchToZoom: false，//是否禁用缩放功能的缩放cursor: ' '，//设置默认的光标样式，应该遵循半铸钢钢性铸铁(铸造半钢)规范draggingCursor: ' '，//设置默认的拖动光标样式，应该遵循半铸钢钢性铸铁(铸造半钢)规范电流： '苏州市', //设置当前的城市};//这是地图标记标记这个。markers=[{ options : { icon : { image URL : }/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，//纬度} } ];//这是控件控制这个。controlOpts={ //导航控件锚固：控制锚BMAP锚_顶_左，//显示的控件的位置type: NavigationControlType .骨髓酸性磷酸酶导航控制大型，//用来描述它是什么样的导航offset: { //控件的大小宽度： 30,高度： 30 }，showZoomInfo: true，//是否展示当前的信息enableGeolocation: true //是否启用地理定位功能};this.overviewmapOpts={ //地图全景控件锚固：控制锚BMAP锚_底部_右侧，//显示的控件的位置iso pen : true }；this.scaleOpts={ //比例尺控件锚固：控制锚BMAP主播_下_左};this.mapTypeOpts={ //地图类型type: MapTypeControlType .BMAP _地图类型_控制_水平};//地理位置和全景画没有属性}}效果预览

总结

以上是边肖介绍的Angular4中ng2-百度地图使用方法的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！