百度地图--获取自定义区域JSON数据（上）

缺乏、安全感 2022-05-03 23:42 1331阅读 0赞

**基于百度地图的自定义区域绘图–调用地图**

1.  注册百度地图的SDK：  
    这一步是调用百度地图的核心，通过获取SDK才能进行相关操作。  
    ![在这里插入图片描述][70]
2.  使用百度地图：  
    在html中引入js文件：

1.  开始使用：  
    你需要在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  ------缩放控件

1.  运行结果  
    ![在这里插入图片描述][70 1]

--------------------

遇到问题汇总：  
第一：使用react的组件形式进行地图调用，由于没有百度地图的依赖jar，我们只能通过其他方式进行引用。这里我通过全局window的方式进行了使用，但是这不是一个好的方式。[建议通过webpack的externals加载BMap使它可以通过require或import引入][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的全局引入模式，

第二：如何使用自定义图标；  
这一点感觉很奇怪，百度上搜索结果大部分都是使用百度地图的图片（这也是自定义图标？），我要实现的就是如图中的那个小鸟在地图上当做一个图标。  
![在这里插入图片描述][70 2]

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能够控制吧，但是找了官网文件，都没有找到说明【可能是我大意了没有找到】，最后就没有管了，第二天，在公司做任务中有个东西需要隐藏，这就让我想到了我的地图上也可以这样做啊~~~~~~~~~~~~~~尴尬）

--------------------

记得在上一家公司（成都某某海公司）实习的时候，使用ecahrts,需要国家–省--市–县--甚至更小的乡镇（那个时候ecahrts的地图还是可下载的，现在好像不行了），这时发现没有对应的地图json数据，需要自己绘图是，那个艰辛啊，到处找资源，找数据（使用谷歌地图一点一点的绘图，一点一点的修改数据点，现在感觉比较傻），都没有想到自己开发，实现这样的数据选点方式（小白还是太傻，经验不足啊~~~~~~~~~~~~~）。  
    最近在网上学习地图时，无意中发现了一个博客（[自定义绘图][Link 1]），顿时羞愧，这个人与人的差距也太大了，于是自己打算简单实现相似的功能吧，这就开启本博客的小白上路之旅。  
如有雷同（联）请（系）见（小）谅（白），小白定当好好学习，天天向上。谢谢（代码见下篇.[百度地图–获取自定义区域JSON数据（下）][JSON]）；

[70]: /images/20220504/8a9a6c0aa38642089a9c47ddd1f0b095.png
[70 1]: /images/20220504/d6656c7df431491e9fa8305b86c8fd9f.png
[webpack_externals_BMap_require_import]: https://www.cnblogs.com/penghuwan/archive/2017/06/05/6943260.html
[70 2]: /images/20220504/3d1ea01fd556440c91a71a7e3ffba646.png
[Link 1]: https://juejin.im/post/59e76c3f5188250988737e7c
[JSON]: https://blog.csdn.net/ljcc122/article/details/83271205