基于百度地图的自定义区域绘图–调用地图
- 注册百度地图的SDK：
这一步是调用百度地图的核心，通过获取SDK才能进行相关操作。
- 使用百度地图：
在html中引入js文件：
<script src="http://api.map.baidu.com/api?v=1.2&ak=kDfrUwYGgSaUbDLwKGXBwlaseKZbI7I9" type="text/javascript"></script>
//最好使用你自己的SDK，我这个可能使用人数过多会被限制。
- 开始使用：
你需要在html代码中加入一个容器存放这个地图（div，p等最好是块级元素，便于你不用在做其他调整）
var map = new BMap.Map('baidumap');//创建地图
//创建一个坐标
var point =new BMap.Point(104.073015,30.664129);
//地图初始化，设置中心点坐标和地图级别
map.centerAndZoom(point,11);//初始化地图，设置中心点坐标，以及地图级别
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.addControl(new BMap.ScaleControl()); //ScaleControl --------比例尺控件
map.addControl(new BMap.OverviewMapControl());//OverviewMapControl ----缩略图控件
map.addControl(new BMap.NavigationControl());//NavigationControl ------缩放控件
- 运行结果
遇到问题汇总：
第一：使用react的组件形式进行地图调用，由于没有百度地图的依赖jar，我们只能通过其他方式进行引用。这里我通过全局window的方式进行了使用，但是这不是一个好的方式。建议通过webpack的externals加载BMap使它可以通过require或import引入
react组件的js中
const { BMap, BMAP_STATUS_SUCCESS,BMAP_NORMAL_MAP,BMAP_HYBRID_MAP ,BMapLib, BMAP_ANCHOR_TOP_RIGHT} = window ;//通过window的全局引入模式，
第二：如何使用自定义图标；
这一点感觉很奇怪，百度上搜索结果大部分都是使用百度地图的图片（这也是自定义图标？），我要实现的就是如图中的那个小鸟在地图上当做一个图标。
fnTestImg =() => {//es6语法
var img = new BMap.Icon('./xj.jpg', new BMap.Size(50, 50));//其实最主要的就是这个图片的当前路径，你可以在你的index.html中（使用img）测试这个路径是否正确，在放在react的js中（你的组件需要的地方）
for(var i = 0;i<overlays.length;i++) {
var mark = new BMap.Marker(overlays[i],{icon:img});
mark["id"] = i;
mark.disableDragging();
map.addOverlay(mark);
}
}
第三：清楚百度地图的logo，这个稍微比较简单，直接使用css操作即可。（我一直在想这个百度的地图应该有API能够控制吧，但是找了官网文件，都没有找到说明【可能是我大意了没有找到】，最后就没有管了，第二天，在公司做任务中有个东西需要隐藏，这就让我想到了我的地图上也可以这样做啊~~~~~~~~~~~~~~尴尬）
<style>
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
</style>
记得在上一家公司（成都某某海公司）实习的时候，使用ecahrts,需要国家–省--市–县--甚至更小的乡镇（那个时候ecahrts的地图还是可下载的，现在好像不行了），这时发现没有对应的地图json数据，需要自己绘图是，那个艰辛啊，到处找资源，找数据（使用谷歌地图一点一点的绘图，一点一点的修改数据点，现在感觉比较傻），都没有想到自己开发，实现这样的数据选点方式（小白还是太傻，经验不足啊~~~~~~~~~~~~~）。
最近在网上学习地图时，无意中发现了一个博客（自定义绘图），顿时羞愧，这个人与人的差距也太大了，于是自己打算简单实现相似的功能吧，这就开启本博客的小白上路之旅。
如有雷同（联）请（系）见（小）谅（白），小白定当好好学习，天天向上。谢谢（代码见下篇.百度地图–获取自定义区域JSON数据（下））；
