关于百度地图那些事 | 邵预鸿|前端开发技术笔记

监听百度地图缩放级别

map.addEventListener("zoomend", function(e){
  var ZoomNum = map.getZoom(); //ZoomNum为层级,区间1-18
  $("#ZoomNum").html(ZoomNum);
});

百度地图如何删除所有Marker呢？

1	map.clearOverlays(); //清除地图上所有覆盖物

销毁百度地图

1	destroy()销毁地图，当使用 WebGL 渲染地图时，如果确认不再使用该地图实例，则需要调用本方法销毁该地图实例

删除全部或者部分

function clearAll() {
            //for (var i = 0; i < map.getOverlays().length; i++) {
            //    map.removeOverlay(map.getOverlays()[i]);
            //}
            //overlays.length = 0; 
            for (var i = 0; i < map.getOverlays().length; i++) {
                if (map.getOverlays()[i].GO == "Marker")
                    map.removeOverlay(map.getOverlays()[i]);
            }
            overlays.length = 0; 
        }

在React中使用百度地图API

首先，找到public/index.html文件，在<body>···</body>中引入百度地图API

<body>
	<script
		type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak='这里填写你的密钥">
	</script>
</body>

到这一步我们已经在React项目中引入了百度地图的API，那么应该怎么使用呢？

初学React的同学可能会想到使用import的方式导入，但是这里你会发现，如果你直接导入就会报错，解决办法分两种：

第一种：用Window对象保存BMap变量，实现HTML文件和JS文件间的变量传递：
在刚才的HTML的body中再加入一段代码：

<body>
	<script
		type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak='这里填写你的密钥">
	</script>
	<script>
		window.BMap = BMap
	</script>
</body>

将BMap对象保存到全局对象window中，需要使用的时候在将他从全局对象window中取出来：

1 2	const BMap = window.BMap; const myGeo = new BMap.Geocoder();// 此处是百度地图提供的获取地址经纬度信息的API

这个API的用法如下：

链接：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b27

不过我相信有部分人跟我一样看不懂这个文档，于是我决定举个例子：

const myGeo = new BMap.Geocoder();
myGeo.getPoint('北京市海淀区上地10街10号', (point) => {
  if (point) {
    // 这个point就是解析地址获得的百度地图坐标系
    console.log(point); // {lat: 40.057339, lng: 116.306941}
  } else {
    console.log('解析失败');
  }
}, '北京市');

不过实际应用的过程中我发现第三个参数好像可以跟第一个参数一样：

const myGeo = new BMap.Geocoder();
myGeo.getPoint('长沙市', (point) => {
  if (point) {
    console.log(point); // {lng: 112.945473, lat: 28.234889}
  } else {
    console.log('解析失败');
  }
}, '长沙市');

应该是百度地图的API会对参数进行解析

第二种：通过webpack的externals加载BMap使它可以通过require或import引入

到webpack.config.js中

module.exports = {
/*此处省略了entry，output,modules等配置*/
  externals:{
    'BMap':'BMap'
  },
}

在使用的过程中就可以直接使用import的方式引入：

1 2	import BMap from 'BMap' const myGeo = new BMap.Geocoder(); // 调用Geocoder()

原文地址:https://blog.csdn.net/qq_26377547/article/details/89058721