abm

angular-baidu-maps

Baidu Maps for Angular.

Showing:

Popularity

Downloads/wk

146

GitHub Stars

46

Maintenance

Last Commit

4mos ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

angular-baidu-maps

Baidu Maps for Angular.

NPM version Ci

Demo

1、安装

npm install angular-baidu-maps --save

AbmModule 模块导入到你项目中。

import { AbmModule } from 'angular-baidu-maps';

@NgModule({
  imports: [
    BrowserModule,
    AbmModule.forRoot({
      apiKey: '' // app key为必选项
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2、使用

地图组件

<abm-map #map [options]="options" (ready)="onReady($event)" style="height: 300px;"></abm-map>

街景组件

<abm-panorama #map [options]="options" (ready)="onReady($event)" style="height: 500px;"></abm-panorama>

默认自动异步加载 js 类库,所以只需要在 NgModule 提供 api key 就可以立即使用了。 options 等同百度地图 new BMap.Map(mapContainer, options)

关于事件注意点(很重要,请认真阅读)

我精力有限,而如果真要以Angular的角度去开发百度地图工作量非常大,所以放弃过度性封装。正因为如此,所以您在注册事件的时候还是要认真一点。

因此,我建议,当你需要注册一个地图的 click 事件时:

map.addEventListener('click', this._click.bind(this));

与之相对应,一定要在 ngOnDestroy 对事件的销毁:

ngOnDestroy(): void {
    this._map.removeEventListener('click', this._click.bind(this));
}

当然,这里还有一些关于覆盖物相关里面涉及的事件,也一并做相应的销毁处理。

很抱歉,如果你在使用 angular-baidu-maps 的时候请认真阅读;但如果你希望一个简单又不得不在几个简单的页面中使用百度地图的话,那么这个插件会是很好的选择

AqmConfig

名称类型默认值描述
apiKeystring-APP KEY 必填项
apiHostAndPathstringmap.qq.com/api/js-
apiCallbackstringangularQQMapsLoaderAPI异步加载回调函数名
apiVersionstring3.0API版本号
apiProtocolhttp,https,file,autoautoAPI 请求协议
mapOptionsObject-默认地图配置项,等同于MapOptions 对象规范
panoramaOptionsObject-默认全景配置项,等同于PanoramaOptions 对象规范
librariesstring[]-其他类库地址,例如 BMapLib 就需要引入:['//api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js']

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  1. Use GitHub Issues board to report bugs and feature requests (not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100