React中使用百度地图——基本使用
官方文档: http://lbsyun.baidu.com/index.php?title=jspopular
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。
百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先 申请密钥(ak) 才可使用。在您使用百度地图JavaScript API之前,请先阅读 百度地图API使用条款 。任何非营利性应用请直接使用,商业应用请参考 使用须知 。
首先,在 index.html 中添加:
然后,在脚手架中组件化。如果使用webpack打包,则在 webpack.base.config.js 中添加以下配置;
最后,在组件中引用:
1、初始化地图
这里使用MapBD组件来封装百度地图,使用组件内导入方式来导入百度地图js,在this.asyncLoading()中调用初始化方法:this.initMap()
2、添加控件
百度地图提供的控件:
添加自带的定位控件:
注意:有些公司网关会禁用百度地图定位接口,导致定位失败。
3、自定义定位功能
百度地图自带的定位控件一般不满足UI需求,需要自定义定位控件和定位功能。
4、智能搜索
根据地名从百度地图中检索地址。
5、添加覆盖物
可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。
百度地图API支持添加覆盖物,但是使用自定义图标时,一般需要设置偏移。
待续.....