React中使用百度地图——基本使用

Posted 2023-03-15

参考技术A

  官方文档： 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支持添加覆盖物，但是使用自定义图标时，一般需要设置偏移。

待续.....