百度地圖--獲取自定義區域JSON資料（上）
基於百度地圖的自定義區域繪圖–呼叫地圖
- 註冊百度地圖的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資料，需要自己繪圖是，那個艱辛啊，到處找資源，找資料（使用谷歌地圖一點一點的繪圖，一點一點的修改資料點，現在感覺比較傻），都沒有想到自己開發，實現這樣的資料選點方式（小白還是太傻，經驗不足啊~~~~~~~~~~~~~）。 最近在網上學習地圖時，無意中發現了一個部落格（自定義繪圖），頓時羞愧，這個人與人的差距也太大了，於是自己打算簡單實現相似的功能吧，這就開啟本部落格的小白上路之旅。 如有雷同（聯）請（系）見（小）諒（白），小白定當好好學習，天天向上。謝謝（程式碼見下篇）；