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

待续.....

/**

* 添加标记

* @param [{id:主键,name:名称,lon:经度,lat:纬度,icon:图标,context:d窗内容,viewImg:d窗图片},...] data

*/

function addMar(data){

for(var i = 0 i < data.length i++){

var marker = new BMap.Marker(new BMap.Point(data[i].lon, data[i].lat),{icon:new BMap.Icon(data[i].icon, new BMap.Size(50,50))})  // 创建标注

marker.setTitle(data[i].name)

marker.dataCont = data[i]

map.addOverlay(marker)

marker.addEventListener("click", function(e){   

var viewWin = "<h4 style='margin:0 0 5px 0padding:0.2em 0'>"+e.target.dataCont.name+"</h4>" + 

"<img style='float:rightmargin:4px' id='imgDemo' src='"+e.target.dataCont.viewImg+"' width='139' height='104' title='"+e.target.dataCont.name+"'/>" + 

"<p style='margin:0line-height:1.5font-size:13pxtext-indent:2em'>"+e.target.dataCont.context+"</p>" + 

"</div>"

var infoWindow = new BMap.InfoWindow(viewWin)

this.openInfoWindow(infoWindow)

//图片加载完毕重绘infowindow

document.getElementById('imgDemo').onload = function (){

infoWindow.redraw()//防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏

}

})

}

}

可以这样,先把生成标注的json数据直接存进marker对象.添加marker的点击监听,触发监听事件时会拿到marker对象本身,从里面可以获取之前我们存进去的json数据,然后拿这个json数据直接生成d窗

---