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

待续.....

帖一下你的MyOverlay的代码？

mapview只能显示最近添加的个覆盖物，

比如你这个覆盖物是兴趣点，那么你应该吧所有的兴趣点都加到这个覆盖物上 然后显示：

poiOverlay.setData(result.getAllPoi())

//mMapView.getOverlays().clear()

mMapView.getOverlays().add(poiOverlay)

mMapView.refresh()

调用百度地图API，添加一个标注可以这样写：

map.addOverlay(new BMap.Marker(new BMap.Point(116.404, 39.915)))

添加多个Marker：

添加超过一千个会导致卡顿，而加载大量标记时应使用BMap.PointCollection可以解决标记太多而卡顿的问题：

数据使用官方data： http://lbsyun.baidu.com/jsdemo/data/points-sample-data.js

---