使用Echart搭配百度地圖建立某一地區熱點圖的注意點
阿新 • • 發佈：2018-12-14
使用Echart搭配百度地圖建立的熱點圖,為網友免費做的demo,細節沒有調整.記錄一下寫的過程.
效果圖:
程式碼:
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <style type="text/css"> html, body { height: 100%; width: 100%; } </style> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 600px;width: 600px;margin: 20px auto;position: relative;top: 50%;margin-top: -300px"></div> <script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/jquery/jquery.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=NqENdsDTP1QxhUn047Z7C6Tfsgv5X1mj"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> <script type="text/javascript"> var dom = document.getElementById('container') var myChart = echarts.init(dom) var app = {} option = null app.title = '熱力圖與百度地圖擴充套件' var points = [ [114.295024, 22.632375], [114.295124, 22.632475], [114.295224, 22.632575], [114.295324, 22.632675], [114.295424, 22.632775], [114.295524, 22.632875], [114.295624, 22.632975], [114.295724, 22.633075], [114.295824, 22.633175], [114.295924, 22.633275], [114.296024, 22.633375], [114.296124, 22.633475], [114.296224, 22.633575], [114.296324, 22.633675], [114.296424, 22.633775], [114.296524, 22.633875], [114.296624, 22.633975], [114.296724, 22.634075], [114.296824, 22.634175], [114.296924, 22.634275], [114.297024, 22.634375], [114.297124, 22.634475], [114.297224, 22.634575], [114.297324, 22.634675], [114.297424, 22.634775], [114.297524, 22.634875], [114.297624, 22.634975], [114.297724, 22.635075], [114.297824, 22.635175], [114.297924, 22.635275], [114.298024, 22.635375], [114.298124, 22.635475], [114.298224, 22.635575], [114.298324, 22.635675], [114.298424, 22.635775], [114.298524, 22.635875], [114.298624, 22.635975], [114.298724, 22.636075], [114.298824, 22.636175], [114.298924, 22.636275], [114.299024, 22.636375], [114.299124, 22.636475], [114.299224, 22.636575], [114.299324, 22.636675], [114.299424, 22.636775], [114.299524, 22.636875], [114.299624, 22.636975], [114.299724, 22.637075], [114.299824, 22.637175], [114.299924, 22.637275]] myChart.setOption(option = { animation: false, bmap: { center: [114.294924, 22.632275], zoom: 15, roam: false, mapStyle: {style: 'midnight'}, enableMapClick:false }, visualMap: { show: false, top: 'top', min: 0, max: 5, seriesIndex: 0, calculable: false, inRange: { color: ['blue', 'blue', 'green', 'yellow', 'red'] } }, series: [{ type: 'heatmap', coordinateSystem: 'bmap', data: points, pointSize: 5, blurSize: 6 }] }) var markerDataArr = [ {num: 1, point: [114.294924, 22.632275], imgurl: '', text: '東部華僑城'}, {num: 2, point: [114.295031, 22.624567], imgurl: '', text: '東部華僑城大峽谷'}, {num: 3, point: [114.309861, 22.614975], imgurl: '', text: '茶溪谷大峽谷'}, {num: 4, point: [114.30691, 22.623766], imgurl: '', text: '華僑酒店'}, {num: 6, point: [114.312242, 22.610332], imgurl: '', text: '華僑城總站'}, {num: 7, point: [114.30165, 22.614285], imgurl: '', text: '東部華僑城天麓'}, {num: 8, point: [114.284623, 22.636045], imgurl: '', text: '茵特拉根會議中心'}, {num: 9, point: [114.286962, 22.638202], imgurl: '', text: '東部華僑城茶溪谷'}, {num: 10, point: [114.283761, 22.647719], imgurl: '', text: '三洲田水庫'} ] if (!app.inNode) { // 新增百度地圖外掛 var bmap = myChart.getModel().getComponent('bmap').getBMap() // bmap.setEnableMapClick('false') //MapOptions{ enableMapClick:false} var myIcon = new BMap.Icon('./0.png', new BMap.Size(42, 56)) for (var i = 0; i < markerDataArr.length; i++) { var item = markerDataArr[i] var pointItem = new BMap.Point(item.point[0], item.point[1]) var opts = { position: pointItem, // 指定文字標註所在的地理位置 offset: new BMap.Size(-30, 30) //設定文字偏移量 } var label = new BMap.Label(item.text, opts) // 建立文字標註物件 label.setStyle({ color: '#fff', backgroundColor: 'transform', border: 'none', fontSize: '12px', fontFamily: '微軟雅黑' }) var mapMaker = new BMap.Marker(pointItem, {icon: myIcon}) bmap.addOverlay(mapMaker) bmap.addOverlay(label) } } </script> </body> </html>
程式碼解釋及注意點:
- 搭配地圖外掛需要引入相應的庫
- 使用
var bmap = myChart.getModel().getComponent('bmap').getBMap() // 獲取百度地圖物件 從而使用地圖api - 多查API,對比官方給出的例子,不是太難的功能都能做出的出來